1 <div class="bs-docs-section">
2 <h1 id="modals" class="page-header">Modals <small>modal.js</small></h1>
3 <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
5 <div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
6 <h4>Overlapping modals not supported</h4>
7 <p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
9 <div class="bs-callout bs-callout-warning" id="callout-modal-markup-placement">
10 <h4>Modal markup placement</h4>
11 <p>Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.</p>
13 <div class="bs-callout bs-callout-warning" id="callout-modal-mobile-caveats">
14 <h4>Mobile device caveats</h4>
15 <p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
18 <p><strong class="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong> To achieve the same effect, use some custom JavaScript:</p>
20 $('#myModal').on('shown.bs.modal', function () {
25 <h2 id="modals-examples">Examples</h2>
27 <h3>Static example</h3>
28 <p>A rendered modal with header, body, and set of actions in the footer.</p>
29 <div class="bs-example bs-example-modal" data-example-id="static-modal">
31 <div class="modal-dialog">
32 <div class="modal-content">
33 <div class="modal-header">
34 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
35 <h4 class="modal-title">Modal title</h4>
37 <div class="modal-body">
38 <p>One fine body…</p>
40 <div class="modal-footer">
41 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
42 <button type="button" class="btn btn-primary">Save changes</button>
44 </div><!-- /.modal-content -->
45 </div><!-- /.modal-dialog -->
46 </div><!-- /.modal -->
47 </div><!-- /example -->
49 <div class="modal fade">
50 <div class="modal-dialog">
51 <div class="modal-content">
52 <div class="modal-header">
53 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
54 <h4 class="modal-title">Modal title</h4>
56 <div class="modal-body">
57 <p>One fine body…</p>
59 <div class="modal-footer">
60 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
61 <button type="button" class="btn btn-primary">Save changes</button>
63 </div><!-- /.modal-content -->
64 </div><!-- /.modal-dialog -->
65 </div><!-- /.modal -->
69 <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
70 <!-- sample modal content -->
71 <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
72 <div class="modal-dialog">
73 <div class="modal-content">
75 <div class="modal-header">
76 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
77 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
79 <div class="modal-body">
80 <h4>Text in a modal</h4>
81 <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
83 <h4>Popover in a modal</h4>
84 <p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
86 <h4>Tooltips in a modal</h4>
87 <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
91 <h4>Overflowing text to show scroll behavior</h4>
92 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
93 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
94 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
95 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
96 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
97 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
98 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
99 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
100 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
102 <div class="modal-footer">
103 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
104 <button type="button" class="btn btn-primary">Save changes</button>
107 </div><!-- /.modal-content -->
108 </div><!-- /.modal-dialog -->
109 </div><!-- /.modal -->
111 <div class="bs-example bs-example-padded-bottom">
112 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
115 </div><!-- /example -->
117 <!-- Button trigger modal -->
118 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
123 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
124 <div class="modal-dialog">
125 <div class="modal-content">
126 <div class="modal-header">
127 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
128 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
130 <div class="modal-body">
133 <div class="modal-footer">
134 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
135 <button type="button" class="btn btn-primary">Save changes</button>
142 <div class="bs-callout bs-callout-warning" id="callout-modal-accessibility">
143 <h4>Make modals accessible</h4>
144 <p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
145 <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
148 <div class="bs-callout bs-callout-info" id="callout-modal-youtube">
149 <h4>Embedding YouTube videos</h4>
150 <p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
153 <h2 id="modals-sizes">Optional sizes</h2>
154 <p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
155 <div class="bs-example">
156 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
157 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
161 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
163 <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
164 <div class="modal-dialog modal-lg">
165 <div class="modal-content">
172 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
174 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
175 <div class="modal-dialog modal-sm">
176 <div class="modal-content">
183 <!-- Modal content for the above example -->
184 <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
185 <div class="modal-dialog modal-lg">
186 <div class="modal-content">
188 <div class="modal-header">
189 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
190 <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
192 <div class="modal-body">
195 </div><!-- /.modal-content -->
196 </div><!-- /.modal-dialog -->
197 </div><!-- /.modal -->
198 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
199 <div class="modal-dialog modal-sm">
200 <div class="modal-content">
202 <div class="modal-header">
203 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
204 <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
206 <div class="modal-body">
209 </div><!-- /.modal-content -->
210 </div><!-- /.modal-dialog -->
211 </div><!-- /.modal -->
213 <h2 id="modals-remove-animation">Remove animation</h2>
214 <p>For modals that simply appear rather than fade in to view, remove the <code>.fade</code> class from your modal markup.</p>
216 <div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
221 <h2 id="modals-grid-system">Using the grid system</h2>
222 <p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.container-fluid</code> within the <code>.modal-body</code> and then use the normal grid system classes within this container.</p>
223 <!-- sample modal content -->
224 <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
225 <div class="modal-dialog">
226 <div class="modal-content">
227 <div class="modal-header">
228 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
229 <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
231 <div class="modal-body">
232 <div class="container-fluid">
234 <div class="col-md-4">.col-md-4</div>
235 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
238 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
239 <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
242 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
245 <div class="col-sm-9">
248 <div class="col-xs-8 col-sm-6">
249 Level 2: .col-xs-8 .col-sm-6
251 <div class="col-xs-4 col-sm-6">
252 Level 2: .col-xs-4 .col-sm-6
259 <div class="modal-footer">
260 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
261 <button type="button" class="btn btn-primary">Save changes</button>
263 </div><!-- /.modal-content -->
264 </div><!-- /.modal-dialog -->
265 </div><!-- /.modal -->
266 <div class="bs-example bs-example-padded-bottom">
267 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
270 </div><!-- /example -->
272 <div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
273 <div class="modal-dialog">
274 <div class="modal-content">
275 <div class="modal-header">
276 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
277 <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
279 <div class="modal-body">
280 <div class="container-fluid">
282 <div class="col-md-4">.col-md-4</div>
283 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
286 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
287 <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
290 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
293 <div class="col-sm-9">
296 <div class="col-xs-8 col-sm-6">
297 Level 2: .col-xs-8 .col-sm-6
299 <div class="col-xs-4 col-sm-6">
300 Level 2: .col-xs-4 .col-sm-6
307 <div class="modal-footer">
308 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
309 <button type="button" class="btn btn-primary">Save changes</button>
311 </div><!-- /.modal-content -->
312 </div><!-- /.modal-dialog -->
313 </div><!-- /.modal -->
317 <h2 id="modals-related-target">Varying modal content based on trigger button</h2>
318 <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
319 <div class="bs-example">
320 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
321 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
322 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
325 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
326 <div class="modal-dialog">
327 <div class="modal-content">
328 <div class="modal-header">
329 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
330 <h4 class="modal-title" id="exampleModalLabel">New message</h4>
332 <div class="modal-body">
334 <div class="form-group">
335 <label for="recipient-name" class="control-label">Recipient:</label>
336 <input type="text" class="form-control" id="recipient-name">
338 <div class="form-group">
339 <label for="message-text" class="control-label">Message:</label>
340 <textarea class="form-control" id="message-text"></textarea>
344 <div class="modal-footer">
345 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
346 <button type="button" class="btn btn-primary">Send message</button>
350 </div><!-- /.modal -->
351 </div><!-- /.bs-example -->
353 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
354 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
355 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
358 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
359 <div class="modal-dialog">
360 <div class="modal-content">
361 <div class="modal-header">
362 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
363 <h4 class="modal-title" id="exampleModalLabel">New message</h4>
365 <div class="modal-body">
367 <div class="form-group">
368 <label for="recipient-name" class="control-label">Recipient:</label>
369 <input type="text" class="form-control" id="recipient-name">
371 <div class="form-group">
372 <label for="message-text" class="control-label">Message:</label>
373 <textarea class="form-control" id="message-text"></textarea>
377 <div class="modal-footer">
378 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
379 <button type="button" class="btn btn-primary">Send message</button>
386 $('#exampleModal').on('show.bs.modal', function (event) {
387 var button = $(event.relatedTarget) // Button that triggered the modal
388 var recipient = button.data('whatever') // Extract info from data-* attributes
389 // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
390 // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
392 modal.find('.modal-title').text('New message to ' + recipient)
393 modal.find('.modal-body input').val(recipient)
397 <h2 id="modals-usage">Usage</h2>
398 <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
400 <h3>Via data attributes</h3>
401 <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
403 <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
406 <h3>Via JavaScript</h3>
407 <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
408 {% highlight js %}$('#myModal').modal(options){% endhighlight %}
410 <h3 id="modals-options">Options</h3>
411 <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
412 <div class="table-responsive">
413 <table class="table table-bordered table-striped js-options-table">
425 <td>boolean or the string <code>'static'</code></td>
427 <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
433 <td>Closes the modal when escape key is pressed</td>
439 <td>Shows the modal when initialized.</td>
446 <p><strong class="text-danger">This option is deprecated since v3.3.0 and will be removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p>
447 <p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
449 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
455 </div><!-- /.table-responsive -->
457 <h3 id="modals-methods">Methods</h3>
459 <h4><code>.modal(options)</code></h4>
460 <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
462 $('#myModal').modal({
467 <h4><code>.modal('toggle')</code></h4>
468 <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
469 {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
471 <h4><code>.modal('show')</code></h4>
472 <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
473 {% highlight js %}$('#myModal').modal('show'){% endhighlight %}
475 <h4><code>.modal('hide')</code></h4>
476 <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
477 {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
479 <h4>.modal('handleUpdate')</h4>
480 <p>Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.</p>
481 <p>Only needed when the height of the modal changes while it is open.</p>
482 {% highlight js %}$('#myModal').modal('handleUpdate'){% endhighlight %}
484 <h3 id="modals-events">Events</h3>
485 <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
486 <p>All modal events are fired at the modal itself (i.e. at the <code><div class="modal"></code>).</p>
487 <div class="table-responsive">
488 <table class="table table-bordered table-striped bs-events-table">
497 <td>show.bs.modal</td>
498 <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
501 <td>shown.bs.modal</td>
502 <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
505 <td>hide.bs.modal</td>
506 <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
509 <td>hidden.bs.modal</td>
510 <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
513 <td>loaded.bs.modal</td>
514 <td>This event is fired when the modal has loaded content using the <code>remote</code> option.</td>
518 </div><!-- /.table-responsive -->
520 $('#myModal').on('hidden.bs.modal', function (e) {