检查 Bootstrap Modal 当前是否显示

Question

我正在尝试合并 Keypress plugin with Modal dialogs in Bootstrap. Based on this question, I can 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
}

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

Answer 2

Bootstrap 将 in CSS class 添加到打开的模式中，因此（假设您的模式具有 id="modal":

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

检查 Bootstrap Modal 当前是否显示

Check if Bootstrap Modal currently Show

javascript

jquery

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3

堆栈片段中的演示