Question

如果用户在对话框外点击，引导模式中是否有选项可以触发事件？

例如：我想在用户点击模式时添加动画摇动 css。

Answer 1

是的，使用显示的事件，您可以触发一个新功能，当有人点击身体（因此在模态之外）时，您可以执行某些操作。

请务必同时添加event.stopPropagation()，以便在外部点击时不关闭模式。

这是一个例子：

$('#myModal').on('shown', function () {
  $('body').on('click', function(e) {
    // your function...
    e.stopPropagation();
  });
})

$('#myModal').on('hidden', function () {
  $('body').off('click');
});

Answer 2

$('#myModal').on('hidden.bs.modal', function (e) {
        // do something...
    })

（资料来源：http://getbootstrap.com/javascript/）

Answer 3

这不适用于Bootstrap，但应该可以按照你的要求进行操作。

以下代码段检测到页面上任何位置的点击。然后，它会检查点击的内容并根据该内容决定要执行的操作。

$(document).click(function (e) {

        //Dont hide the button if it's a link or input that was clicked
        if ((e.target.nodeName == 'A') || (e.target.nodeName == 'INPUT')) return;

        HideSubmenus();
    });

在你的情况下，你可能会检查它是否不是Div（因而不是模态）。

Answer 4

Animated Shakes是Modal popover的默认功能。您只需设置背景：'静态'即可。当有人在模态外部单击时，这将阻止弹出窗口关闭并启用摇动动画。

$('#myModal').modal({
     backdrop:'static', show: true
})

有关详细信息，请查看this

点击对话框外部的twitter bootstrap模态触发器

4 个答案: