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

Question

如果有任何 bootstrap模式当前打开,如何检查？

背后的原因:如果一个模态是打开的,我想停用某个keyhandler.

Answer 1

如果您使用的是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 
}

Answer 2

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

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

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