Check if Bootstrap Modal currently Show

Profile picture for p4c
p4c

I'm trying to combine the Keypress plugin with Modal dialogs in Bootstrap. Based on this question, I can check if modal is open or closed using jquery.

However, I need to execute Keypress only if modal is closed. If it's open, I don't want to listen for keypresses.

Here's my code so far:

<!-- language: lang-js --> 
if(!$("#modal").is(':visible')) {

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

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

  // I have over 20 other listeners
}

It's probably easier to leave the listeners attached and then conditionally exit them if the modal is open.

You could setup something like this:

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

Then just copy and paste the following line into all of your listeners.

if (modalIsOpen) return;

Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-js --> 
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'");
});
<!-- language: lang-html --> 
<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>
<!-- end snippet -->