Question

我无法弄清楚如何使用bootstrap模式实现确认对话框，这是我的代码不起作用：

<div id="id" class="modal hide">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>title</h3>
    </div>
    <div class="modal-body">
        <p>confirm message</p>
    </div>
    <div class="modal-footer">
        <button data-dismiss="modal" class="btn">No</button>
        <button id="id-confirm" class="btn btn-primary">Yes</button>
    </div>
</div>
<a id="a" href="http://example.com">link</a>
<script type="text/javascript">
    var confirmed = false;
    var modal = $('#id');
    var clickee = $('#a');

    clickee.click(function() {
        if (!confirmed) {
            modal.modal('show');
            return false;
        }
    });
    $('#id-confirm').click(function() {
        confirmed = true;
        clickee.click();
        modal.modal('hide');
    });
</script>

当我点击链接link时，弹出对话框，但当我确认时，没有重定向，当我再次点击链接link时，我被重定向。

我可以重定向到链接的href，我知道，但我想让它可重用，而不是链接（a元素）我也可以使用按钮或定义onclick事件按钮。

感谢您的回答。

Answer 1

让我先了解一下。

您需要单击需要打开引导确认模式的链接，然后单击是，用户需要转到其他链接吗？

如果是这样的话：

<a id="a" href="#id" data-toggle="modal">link</a>

然后你为什么不重新定位按钮点击id-confirm

你需要删除href =“http://example.com”，因为bootstrap模式不知道应该打开哪个div。

Answer 2

在jQuery中，Click()未激活用户点击的<a>标记，它只会调用您附加的任何onclick=标记。

事实上，clickee.click();只调用您的匿名函数clickee.click(function() {，但没有任何事情发生，因为confirmed为真（尝试在click()中插入警告来证明）。再次单击时，第二次单击事件不会被bootstrap暂停（stopPropagation），现在它就像普通链接一样。这就是你的经历。

我不完全确定你想要什么，但是如果你想激活链接，确认后，重定向是最简单的方法（我知道你不想这样，但是你不能这样做click()要么，因为代码现在是）

$('#id-confirm').click(function() {
     confirmed = true;
     window.location=clickee.attr('href');
     modal.modal('hide');
});

只要您指定了<button>属性，

就可以使用，并且可以与href等其他标记类型一起使用。

Answer 3

有一个库为你做了很多这样的事情：http://bootboxjs.com。 YMMV

twitter-bootstrap模态确认对话框

3 个答案: