检查是否有任何引导模式打开答案

【问题标题】：Check if any bootstrap modal is open检查是否有任何引导模式打开
【发布时间】：2014-10-24 06:54:08
【问题描述】：

如何检查 any 引导模式当前是否打开？

背后的原因：如果模态框打开，我想停用某些键处理程序。

【问题讨论】：

你做了哪些努力？
我已经从下面的答案中看到了解决方案。但这不是我想要的。我想要一个通用的解决方案，它适用于页面上的任何引导模式。

标签： javascript twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果你使用 jquery，你可以使用这个：

function isABootstrapModalOpen() {
    return $('.modal.in').length > 0;
}

Vanilla JS 解决方案：

function isABootstrapModalOpen() {    
    return document.querySelectorAll('.modal.in').length > 0;
}

此解决方案适用于任何模式，而不仅仅是特定模式。

编辑：上面的代码测试是否在任何给定时刻打开了模式。如其他答案所示，如果您想在打开模式时禁用事件处理程序，则必须使用引导事件，如下所示：

// when any modal is opening
$('.modal').on('show.bs.modal', function (e) {
  // disable your handler
})

// when any modal is closing
$('.modal').on('hide.bs.modal', function (e) {
  // enable your handler
})

您还可以在事件处理程序中使用 isABootstrapModalOpen 来测试是否必须执行处理程序的代码（因此您不必在每次打开/关闭模式时启用/禁用处理程序）。

function eventHandler(e) {
  // if a modal is open
  if(isABootstrapModalOpen()) {
    // prevent the event default action
    e.preventDefault();
    // and exit the function now
    return;
  }

  // if a modal is not open
  // proceed to the rest of the handler's code 
}

【讨论】：

检查可以更简单if($('.modal.in').length)

【解决方案2】：

Bootstrap 模式在打开时会触发事件。在您的情况下，我建议将事件绑定到 show.bs.modal 事件并取消绑定您的键处理程序事件。简单例子：

$('#myModal').on('show.bs.modal', function (e) {
    // yadda yadda .unbind()
})

文档：http://getbootstrap.com/javascript/#modals，向下滚动到事件。

【讨论】：

尽管我不喜欢这个问题，但这仍然是一个很好的答案，所以+1
是的，但这适用于特定的模式。我想要一个通用的解决方案。
@Razer 根据文档：“不支持重叠模式 - 确保在另一个模式仍然可见时不要打开模式。一次显示多个模式需要自定义代码。”因此，要么您内置了该自定义代码，要么您尝试修复的场景不存在。如果你确实修复了它，你可以绑定到$(document).on('show.bs.modal', '*', function() { ... })
应该是$('.modal')或$(document)而不是$('#myModal')。

【解决方案3】：

拿这个：

$(document).find('.modal').each(function(e) {

    var element = $(this);

    if ( (element.data('bs.modal') || {isShown: false}).isShown ) {
      console.log('a modal is open');
    }

});

【讨论】：

【解决方案4】：

我的解决方案是使用 jQueries 的 hasClass 方法。

return $('div.modal').hasClass('in'); // True if open, false if closed

【讨论】：

【解决方案5】：

你可以试试这个：

alert($('#myModal').hasClass('in'));

【讨论】：

【解决方案6】：

对于 Bootstrap 4，模式在打开时具有类“显示”

所以要检查是否有任何模态打开：

if ($('body').find('.modal.show').length) {
    // Do something
}

我目前使用堆叠模态（多个打开），问题是如果您对单个模态执行 .modal('hide')。 Bootstrap 从 body 元素中删除类 .modal-body 。然后模态不再滚动，所以我不得不这样做：

$(document)
    .on('hidden.bs.modal', '.modal', function() {
        /**
         * Check if there are still modals open
         * Body still needs class modal-open
         */
        if($('body').find('.modal.show').length) {
            $('body').addClass('modal-open');
        }
    })
;

【讨论】：

【解决方案7】：

虽然不是这个直接问题的答案，但它是相关的。以下是检查是否在 Bootstrap 4 模式中的方法： if (window.parent.jQuery('.modal-content').length > 0) { // in a modal }

【讨论】：