twitter-bootstrap模态确认对话框

Question

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

<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确认按钮

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

Answer 2

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

实际上， clickee.click(); 仅调用您的匿名函数clickee.click(function() { ，但未发生任何事情，因为confirmed为true（尝试在click()插入警报以进行证明）。再次单击时，不会停止单击事件（ stopPropagation ）引导，现在它像普通链接一样工作，这就是您所体验到的。

我不确定您想要什么，但是如果要激活链接，请在确认后重定向是最简单的方法（我知道您不想要这样做，但是您也不能使用click()来实现， 因为代码是通过现在 ）

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

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

Answer 3

有一个库可以为您做很多事情： http : //bootboxjs.com 。 青年汽车