Question

如果任何引导模式当前打开，如何检查？

背后的原因：如果模态已打开，我想停用某些关键操作程序。

Answer 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 
}

Answer 2

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

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

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

Answer 3

以下是：

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

    var element = $(this);

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

});

Answer 4

你可以试试这个：

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

Answer 5

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

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

Answer 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');
        }
    })
;

检查是否有任何bootstrap模式打开

6 个答案: