检查 Bootstrap Modal 当前是否显示答案

【问题标题】：Check if Bootstrap Modal currently Show检查 Bootstrap Modal 当前是否显示
【发布时间】：2015-05-26 20:25:06
【问题描述】：

我正在尝试将Keypress plugin 与Modal dialogs in Bootstrap 结合起来。基于这个问题，我可以check if modal is open or closed using jquery。

但是，如果模态关闭，我需要执行 Keypress 。如果它是打开的，我不想听按键。

这是我目前的代码：

if(!$("#modal").is(':visible')) {

  var listener = new window.keypress.Listener();

  listener.simple_combo("enter", function() {
    console.log('enter');
  });

  // I have over 20 other listeners
}

【问题讨论】：

我认为您需要检查模式是否在事件函数中可见，而不是在不可见时创建侦听器。除非 Keypress 库以某种方式更改此行为，否则如果模式对话框不可见且始终处于活动状态，则现在会在页面加载时创建侦听器。
哦，是的，谢谢它的工作，但我有很多听众，你认为这是最好的解决方案吗？

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

【解决方案1】：

如果模式打开，让监听器保持连接然后有条件地退出它们可能更容易。

你可以这样设置：

var modalIsOpen = false
$('#myModal').on('shown.bs.modal', function(e) { modalIsOpen = true;})
$('#myModal').on('hidden.bs.modal', function(e) { modalIsOpen = false;})

然后只需将以下行复制并粘贴到所有听众中。

if (modalIsOpen) return;

堆栈片段中的演示

var modalIsOpen = false
$('#myModal').on('shown.bs.modal', function(e) { modalIsOpen = true;})
$('#myModal').on('hidden.bs.modal', function(e) { modalIsOpen = false;})

var listener = new window.keypress.Listener();

listener.simple_combo("s", function() {
  if (modalIsOpen) return;
  alert("You hit 's'");
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="http://cdn.rawgit.com/dmauro/Keypress/master/keypress.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Don't Act On Key Presses</h4>
      </div>
      <div class="modal-body">
        Try Hitting S
      </div>
    </div>
  </div>
</div>

<p>Try Hitting S</p>

【讨论】：

【解决方案2】：

Bootstrap 在打开时将in CSS 类添加到模态，因此（假设您的模态具有id="modal"：

var modalIsOpen = $('#modal.in').length > 0;

【讨论】：