Bootstrap Modal Keyboard Toggle

Demonstrates how to toggle the keyboard property on a modal window. Created to answer SO question: http://stackoverflow.com/q/11806816/570918

by mmfansler

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<h3>Keyboard</h3>
<button class="btn" data-toggle="keyboard">Off</button>

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

JavaScript

$('#myModal').modal({
    keyboard: false,
    show: false
});

$('[data-toggle^="keyboard"]').on('click.keyboard-toggle', function() {
    var $this = $(this);

    if ($this.toggleClass('active').hasClass('active')) {
        $this.text('On');
        $('#myModal').data('modal').options.keyboard = true;
    } else {
        $this.text('Off');
        $('#myModal').data('modal').options.keyboard = false;
    }

});