twitter-bootstrap 模态确认对话框答案

【问题标题】：twitter-bootstrap modal confirm dialogtwitter-bootstrap 模态确认对话框
【发布时间】：2012-11-17 20:58:29
【问题描述】：

我不知道如何使用引导模式实现确认对话框，这是我的代码不起作用：

<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 事件。

感谢您的回答。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

让我先明白这一点。

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

如果是这样的话：

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

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

您需要删除 href="http://example.com" 因为引导模式不知道应该打开哪个 div。

【讨论】：

我正在通过 javascript 打开 div 以进行引导（它被打开了，所以我在这里没有看到问题），但是当我点击“是”时，我想得到那个按钮触发了单击确认对话框窗口，但这次没有提示确认。请注意，它的行为与此类似：link
在这种情况下，您需要在确认后从您的 javascript 进行重定向。我不明白你为什么再次做 clickee.click() 。要做的就是重新打开模式。

【解决方案2】：

在 jQuery 中，Click() 不会激活 <a>-标签，因为它被用户单击，它只会调用您附加的任何 onclick=。

事实上，clickee.click(); 只是调用了你的匿名函数clickee.click(function() {，但什么也没有发生，因为confirmed 是真的（尝试在click() 中插入一个警报来证明）。当您再次单击时，第二次单击事件不会被引导程序停止 (stopPropagation)，现在它就像正常链接一样工作。这就是你所经历的。

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

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

只要您指定了href 属性，它就可以工作，并且可以与<button> 等其他标签类型重复使用。

【讨论】：

【解决方案3】：

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

【讨论】：

这太完美了！非常容易使用。