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

Check if any bootstrap modal is open

本文关键字：模式 任何引 是否 检查      更新时间：2023-09-26

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

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

如果您使用的是jquery，您可以使用这个：

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

香草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 
}

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

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

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

这里取这个：

$(document).find('.modal').each(function(e) {
    var element = $(this);
    if ( (element.data('bs.modal') || {isShown: false}).isShown ) {
      console.log('a modal is open');
    }
});

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

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

你可以试试这个：

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

对于Bootstrap 4，如果打开，则模态具有类"show"

因此，检查是否有任何模式打开：

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

我目前使用堆叠模态（多个打开），问题是如果你使用单个模态的.modal（"隐藏"）。Bootstrap从body元素中删除class.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 4模式中检查：if (window.parent.jQuery('.modal-content').length > 0) { // in a modal }

您可以使用这个：

$('#mymodal').on('shown.bs.modal', function (e) {
    console.log("Modal is open");
})
相关文章：