Bootstrap(2.3.2) 模态弹出可见性检查答案

【问题标题】：Bootstrap(2.3.2) modal popup visibility checkBootstrap(2.3.2) 模态弹出可见性检查
【发布时间】：2016-10-13 18:35:03
【问题描述】：

当引导程序pop up 打开时，我需要在body 标签中插入一个类名。我曾尝试使用 jquery 添加，但不幸的是它不起作用。任何帮助将不胜感激。

这是我的代码

if(!$('.modal-backdrop').is(':visible'))
{
$(body).addClass("test");
}

Demo

【问题讨论】：

标签： jquery html css twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

您可以使用“显示”引导事件来做到这一点，如下所示：

$('.modal-backdrop').on('shown', function() {
    $('body').addClass("test");
});

【讨论】：

【解决方案2】：

$('.modal-backdrop').on('shown', function() {
        $('body').addClass("test");
    });

    $('.modal-backdrop').on('hidden', function () {
    $('body').removeClass("test");
})

【讨论】：

我个人自己使用这种方法，如果模式淡入并且用户是快速点击者，可能会出现问题，但我发现它工作正常。
if($('.modal-backdrop').hasClass('in')){ $('body').addClass("test"); }
但是当弹出窗口关闭时，它不会从正文中删除 test 类

【解决方案3】：

在你的演示中似乎 $('#myModal1 .selectpicker').selectpicker(); 引起了一些问题。

但您可以使用来自 http://getbootstrap.com/javascript/#modals docs 的代码

$('#myModal1').on('shown.bs.modal', function () {
 $('body').addClass("test");
});

http://jsfiddle.net/h3WDq/1410/

如果添加了类，请通过控制台日志检查。

【讨论】：

在我的情况下，我没有使用 id 名称，所以需要通过类名来完成。
然后您只需将 id 更改为 class 它仍然可以工作。你有很多同一个类的模态吗？
是的，我有多个具有不同类名的弹出窗口，因此无法指定标记类并为 tat 编写脚本，这就是为什么我需要检查覆盖类 .modal-backdrop跨度>
这个怎么样？ jsfiddle.net/h3WDq/1410 因为每个模态都有一个 .modal 类。
但是在我的真实页面中我没有 id 所以不能引用`#mymodal`

【解决方案4】：

你可以使用

$('#myModal').on('shown.bs.modal', function () {
  // will only come inside after the modal is shown
});

【讨论】：

【解决方案5】：

请为此使用引导模式事件： http://getbootstrap.com/javascript/#js-events

你可以使用这个：$('#myModal').on('show.bs.modal', function (e){}) http://jsfiddle.net/h3WDq/1408/

【讨论】：