使用bootbox时,show事件未触发。

13

我无法捕获bootbox.confirm对话框的show事件,以便在显示它之前进行一些CSS调整。

我尝试了以下方法,但并没有成功:

$(document).on("show.bs.modal", function (event) {...});
$(document).on("show", function (event) {...});
$(document).on("show", ".bootbox", function (event) {...});
3个回答

43

这应该适用于您使用的Bootbox 4.x.x和Bootstrap 3.x.x:

var box = bootbox.dialog({
  message: '',
  title: '',
  buttons: {},
  show: false
});

box.on("shown.bs.modal", function() {
  alert('it worked!');
});

box.modal('show');

或者像这样:

$(document).on("shown.bs.modal", function (event) {...});

2
我不确定为什么当前选择了“正确”的答案。这个 shown.bs.modal 对我有用 - 而 show.bs.modal 则没有。 - Andrew Newby
3
我发现在对话框上没有设置'show'选项或将其设置为true时,show.bs.modal事件无法工作。此时对话框会自动显示,因此该事件不会触发。如果将show选项设置为false(如本例所示),并手动使用box.modal('show')显示模态框,则show.bs.modal事件也会被触发。 - rolandow
这对我有用: bootbox.dialog({ message: '', title: '', buttons: {}, show: false }).one("shown.bs.modal", function() { alert('它起作用了!'); }); - SC00PB
这绝对解决了问题,应该被接受为答案。 - user698188
完美,这个可行;被接受的答案不行。 - Rippo

3

我更喜欢使用全局函数,例如:

function bootbox_confirm(msg, callback_success, callback_cancel) {
    var d = bootbox.confirm({message:msg, show:false, callback:function(result) {
        if (result)
            callback_success();
        else if(typeof(callback_cancel) == 'function')
            callback_cancel();
    }});

    d.on("show.bs.modal", function() {
        //css afjustment for confirm dialogs
        alert("before show");
    });
    return d;
}

并以这种方式调用:

bootbox_confirm("my message", function(){alert('ok')}, function(){alert('cancel')}).modal('show');

或者当没有取消逻辑时:

bootbox_confirm("my message", function(){alert('ok')}).modal('show');

1
我希望人们在对答案进行负评时能够评论一下为什么他们认为这个答案不好,特别是当答案被采纳时(意味着它对提问者有用)。 - Austin Schmidt
@AustinSchmidt 我认为这是因为他从未指定答案需要在全局函数中。他采用了可行的答案,然后将其应用于自己的答案之后,并将其标记为正确。就我个人而言,我不太关心它(我写了最受欢迎的答案),但我可以看出其他人可能会对此有意见。 - codephobia

2
您可以这样做:
var dialog = bootbox.dialog("foo", [], {show: false});

dialog.on("shown", function() {
 //
});

dialog.modal("show");

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接