0

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

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

感谢您的回答。

4

3 回答 3

5

让我先明白这一点。

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

如果是这样的话:

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

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

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

于 2012-11-17T21:19:16.890 回答
2

有一个库可以为您完成很多工作:http: //bootboxjs.com。YMMV

于 2013-09-12T11:18:42.717 回答
2

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

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

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

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

<button>只要您指定了一个href属性,它就可以工作,并且可以与其他标签类型(如)一起使用。

于 2012-11-17T21:43:55.430 回答