Modals

Style


 1<div class="modal hide" role="dialog">
 2  <div class="modal-header">
 3    <button type="button" class="close" data-dismiss="modal">×</button>
 4    <h3 id="myModalLabel">Modal header</h3>
 5  </div>
 6  <div class="modal-body">
 7    <p>One fine body…</p>
 8  </div>
 9  <div class="modal-footer">
10    <button class="btn" data-dismiss="modal">Close</button>
11    <button class="btn btn-primary">Save changes</button>
12  </div>
13</div>

Triggering

You can link a button to a modal either by using a data attribute, or by triggering it via Javascript. This example shows you both:

Launch via attribute Launch via JS

 1<!-- Trigger via data attribute -->
 2<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch via attribute</a>
 3
 4<!-- Trigger via JS -->
 5<a href="#myModal" role="button" class="btn" id="js-modal-button">Launch via JS</a>
 6<script type="text/javascript">
 7  $('#js-modal-button').click(function() {
 8    $('#myModal').modal();
 9    return false
10  });
11</script>
12 
13<!-- Modal -->
14<div id="myModal" class="modal hide" role="dialog">
15  ...
16</div>

Events, Options, etc

The modal is built on Twitter Bootstrap, and inherits all events and options. See more in the Bootstrap Docs.