Stripped personal data from development repository
view | history | commit | commitdiff
Samo Penic
2019-02-20 83c3f647c35477564b77cbc5b36d37d793d5442a
commit | author | age
83c3f6 1 ---
SP 2 layout: docs
3 title: Modal
4 description: Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
5 group: components
6 toc: true
7 ---
8
9 ## How it works
10
11 Before getting started with Bootstrap's modal component, be sure to read the following as our menu options have recently changed.
12
13 - Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
14 - Clicking on the modal "backdrop" will automatically close the modal.
15 - Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
16 - Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
17 - Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
18 - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
19
20 {% highlight js %}
21 $('#myModal').on('shown.bs.modal', function () {
22   $('#myInput').trigger('focus')
23 })
24 {% endhighlight %}
25
26 {% include callout-info-prefersreducedmotion.md %}
27
28 Keep reading for demos and usage guidelines.
29
30 ## Examples
31
32 ### Modal components
33
34 Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
35
36 <div class="bd-example bd-example-modal">
37   <div class="modal" tabindex="-1" role="dialog">
38     <div class="modal-dialog" role="document">
39       <div class="modal-content">
40         <div class="modal-header">
41           <h5 class="modal-title">Modal title</h5>
42           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
43             <span aria-hidden="true">&times;</span>
44           </button>
45         </div>
46         <div class="modal-body">
47           <p>Modal body text goes here.</p>
48         </div>
49         <div class="modal-footer">
50           <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
51           <button type="button" class="btn btn-primary">Save changes</button>
52         </div>
53       </div>
54     </div>
55   </div>
56 </div>
57
58 {% highlight html %}
59 <div class="modal" tabindex="-1" role="dialog">
60   <div class="modal-dialog" role="document">
61     <div class="modal-content">
62       <div class="modal-header">
63         <h5 class="modal-title">Modal title</h5>
64         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
65           <span aria-hidden="true">&times;</span>
66         </button>
67       </div>
68       <div class="modal-body">
69         <p>Modal body text goes here.</p>
70       </div>
71       <div class="modal-footer">
72         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
73         <button type="button" class="btn btn-primary">Save changes</button>
74       </div>
75     </div>
76   </div>
77 </div>
78 {% endhighlight %}
79
80 ### Live demo
81
82 Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
83
84 <div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
85   <div class="modal-dialog" role="document">
86     <div class="modal-content">
87       <div class="modal-header">
88         <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
89         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
90           <span aria-hidden="true">&times;</span>
91         </button>
92       </div>
93       <div class="modal-body">
94         <p>Woohoo, you're reading this text in a modal!</p>
95       </div>
96       <div class="modal-footer">
97         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
98         <button type="button" class="btn btn-primary">Save changes</button>
99       </div>
100     </div>
101   </div>
102 </div>
103
104 <div class="bd-example">
105   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive">
106     Launch demo modal
107   </button>
108 </div>
109
110 {% highlight html %}
111 <!-- Button trigger modal -->
112 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
113   Launch demo modal
114 </button>
115
116 <!-- Modal -->
117 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
118   <div class="modal-dialog" role="document">
119     <div class="modal-content">
120       <div class="modal-header">
121         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
122         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
123           <span aria-hidden="true">&times;</span>
124         </button>
125       </div>
126       <div class="modal-body">
127         ...
128       </div>
129       <div class="modal-footer">
130         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
131         <button type="button" class="btn btn-primary">Save changes</button>
132       </div>
133     </div>
134   </div>
135 </div>
136 {% endhighlight %}
137
138 ### Scrolling long content
139
140 When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
141
142 <div id="exampleModalLong" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
143   <div class="modal-dialog" role="document">
144     <div class="modal-content">
145       <div class="modal-header">
146         <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
147         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
148           <span aria-hidden="true">&times;</span>
149         </button>
150       </div>
151       <div class="modal-body">
152         <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>
153         <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
154         <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>
155         <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>
156         <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
157         <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>
158         <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>
159         <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
160         <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>
161         <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>
162         <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
163         <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>
164         <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>
165         <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
166         <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>
167         <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>
168         <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
169         <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>
170       </div>
171       <div class="modal-footer">
172         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
173         <button type="button" class="btn btn-primary">Save changes</button>
174       </div>
175     </div>
176   </div>
177 </div>
178
179 <div class="bd-example">
180   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
181     Launch demo modal
182   </button>
183 </div>
184
185 {% highlight html %}
186 <!-- Button trigger modal -->
187 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
188   Launch demo modal
189 </button>
190
191 <!-- Modal -->
192 <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
193   <div class="modal-dialog" role="document">
194     <div class="modal-content">
195       <div class="modal-header">
196         <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
197         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
198           <span aria-hidden="true">&times;</span>
199         </button>
200       </div>
201       <div class="modal-body">
202         ...
203       </div>
204       <div class="modal-footer">
205         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
206         <button type="button" class="btn btn-primary">Save changes</button>
207       </div>
208     </div>
209   </div>
210 </div>
211 {% endhighlight %}
212
213 ### Vertically centered
214
215 Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
216
217 <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
218   <div class="modal-dialog modal-dialog-centered" role="document">
219     <div class="modal-content">
220       <div class="modal-header">
221         <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
222         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
223           <span aria-hidden="true">&times;</span>
224         </button>
225       </div>
226       <div class="modal-body">
227         <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>
228       </div>
229       <div class="modal-footer">
230         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
231         <button type="button" class="btn btn-primary">Save changes</button>
232       </div>
233     </div>
234   </div>
235 </div>
236
237 <div class="bd-example">
238   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
239     Launch demo modal
240   </button>
241 </div>
242
243 {% highlight html %}
244 <!-- Button trigger modal -->
245 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
246   Launch demo modal
247 </button>
248
249 <!-- Modal -->
250 <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
251   <div class="modal-dialog modal-dialog-centered" role="document">
252     <div class="modal-content">
253       <div class="modal-header">
254         <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
255         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
256           <span aria-hidden="true">&times;</span>
257         </button>
258       </div>
259       <div class="modal-body">
260         ...
261       </div>
262       <div class="modal-footer">
263         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
264         <button type="button" class="btn btn-primary">Save changes</button>
265       </div>
266     </div>
267   </div>
268 </div>
269 {% endhighlight %}
270
271 ### Tooltips and popovers
272
273 [Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
274
275 <div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
276   <div class="modal-dialog" role="document">
277     <div class="modal-content">
278       <div class="modal-header">
279         <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
280         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
281           <span aria-hidden="true">&times;</span>
282         </button>
283       </div>
284       <div class="modal-body">
285         <h5>Popover in a modal</h5>
286         <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute." data-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
287         <hr>
288         <h5>Tooltips in a modal</h5>
289         <p><a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
290       </div>
291       <div class="modal-footer">
292         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
293         <button type="button" class="btn btn-primary">Save changes</button>
294       </div>
295     </div>
296   </div>
297 </div>
298
299 <div class="bd-example">
300   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalPopovers">
301     Launch demo modal
302   </button>
303 </div>
304
305 {% highlight html %}
306 <div class="modal-body">
307   <h5>Popover in a modal</h5>
308   <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
309   <hr>
310   <h5>Tooltips in a modal</h5>
311   <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
312 </div>
313 {% endhighlight %}
314
315 ### Using the grid
316
317 Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the normal grid system classes as you would anywhere else.
318
319 <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
320   <div class="modal-dialog" role="document">
321     <div class="modal-content">
322       <div class="modal-header">
323         <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
324         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
325       </div>
326       <div class="modal-body">
327         <div class="container-fluid bd-example-row">
328           <div class="row">
329             <div class="col-md-4">.col-md-4</div>
330             <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
331           </div>
332           <div class="row">
333             <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
334             <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
335           </div>
336           <div class="row">
337             <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
338           </div>
339           <div class="row">
340             <div class="col-sm-9">
341               Level 1: .col-sm-9
342               <div class="row">
343                 <div class="col-8 col-sm-6">
344                   Level 2: .col-8 .col-sm-6
345                 </div>
346                 <div class="col-4 col-sm-6">
347                   Level 2: .col-4 .col-sm-6
348                 </div>
349               </div>
350             </div>
351           </div>
352         </div>
353       </div>
354       <div class="modal-footer">
355         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
356         <button type="button" class="btn btn-primary">Save changes</button>
357       </div>
358     </div>
359   </div>
360 </div>
361
362 <div class="bd-example">
363 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#gridSystemModal">
364   Launch demo modal
365 </button>
366 </div>
367
368 {% highlight html %}
369 <div class="modal-body">
370   <div class="container-fluid">
371     <div class="row">
372       <div class="col-md-4">.col-md-4</div>
373       <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
374     </div>
375     <div class="row">
376       <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
377       <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
378     </div>
379     <div class="row">
380       <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
381     </div>
382     <div class="row">
383       <div class="col-sm-9">
384         Level 1: .col-sm-9
385         <div class="row">
386           <div class="col-8 col-sm-6">
387             Level 2: .col-8 .col-sm-6
388           </div>
389           <div class="col-4 col-sm-6">
390             Level 2: .col-4 .col-sm-6
391           </div>
392         </div>
393       </div>
394     </div>
395   </div>
396 </div>
397 {% endhighlight %}
398
399 ### Varying modal content
400
401 Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked.
402
403 Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.
404
405 {% capture example %}
406 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
407 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
408 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
409
410 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
411   <div class="modal-dialog" role="document">
412     <div class="modal-content">
413       <div class="modal-header">
414         <h5 class="modal-title" id="exampleModalLabel">New message</h5>
415         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
416           <span aria-hidden="true">&times;</span>
417         </button>
418       </div>
419       <div class="modal-body">
420         <form>
421           <div class="form-group">
422             <label for="recipient-name" class="col-form-label">Recipient:</label>
423             <input type="text" class="form-control" id="recipient-name">
424           </div>
425           <div class="form-group">
426             <label for="message-text" class="col-form-label">Message:</label>
427             <textarea class="form-control" id="message-text"></textarea>
428           </div>
429         </form>
430       </div>
431       <div class="modal-footer">
432         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
433         <button type="button" class="btn btn-primary">Send message</button>
434       </div>
435     </div>
436   </div>
437 </div>
438 {% endcapture %}
439 {% include example.html content=example %}
440
441 {% highlight js %}
442 $('#exampleModal').on('show.bs.modal', function (event) {
443   var button = $(event.relatedTarget) // Button that triggered the modal
444   var recipient = button.data('whatever') // Extract info from data-* attributes
445   // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
446   // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
447   var modal = $(this)
448   modal.find('.modal-title').text('New message to ' + recipient)
449   modal.find('.modal-body input').val(recipient)
450 })
451 {% endhighlight %}
452
453 ### Change animation
454
455 The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation.
456
457 If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`.
458
459 ### Remove animation
460
461 For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
462
463 {% highlight html %}
464 <div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
465   ...
466 </div>
467 {% endhighlight %}
468
469 ### Dynamic heights
470
471 If the height of a modal changes while it is open, you should call `$('#myModal').modal('handleUpdate')` to readjust the modal's position in case a scrollbar appears.
472
473 ### Accessibility
474
475 Be sure to add `role="dialog"` and `aria-labelledby="..."`, referencing the modal title, to `.modal`, and `role="document"` to the `.modal-dialog` itself. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
476
477 ### Embedding YouTube videos
478
479 Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
480
481 ## Optional sizes
482
483 Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
484
485 <table class="table table-bordered table-striped">
486   <thead>
487     <tr>
488       <th>Size</th>
489       <th>Class</th>
490       <th>Modal max-width</th>
491     </tr>
492   </thead>
493   <tbody>
494     <tr>
495       <td>Small</td>
496       <td><code>.modal-sm</code></td>
497       <td><code>300px</code></td>
498     </tr>
499     <tr>
500       <td>Default</td>
501       <td class="text-muted">None</td>
502       <td><code>500px</code></td>
503     </tr>
504     <tr>
505       <td>Large</td>
506       <td><code>.modal-lg</code></td>
507       <td><code>800px</code></td>
508     </tr>
509     <tr>
510       <td>Extra large</td>
511       <td><code>.modal-xl</code></td>
512       <td><code>1140px</code></td>
513     </tr>
514   </tbody>
515 </table>
516
517 Our default modal without modifier class constitutes the "medium" size modal.
518
519 <div class="bd-example">
520   <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
521   <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
522   <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
523 </div>
524
525 {% highlight html %}
526 <!-- Extra large modal -->
527 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
528
529 <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
530   <div class="modal-dialog modal-xl">
531     <div class="modal-content">
532       ...
533     </div>
534   </div>
535 </div>
536
537 <!-- Large modal -->
538 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
539
540 <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
541   <div class="modal-dialog modal-lg">
542     <div class="modal-content">
543       ...
544     </div>
545   </div>
546 </div>
547
548 <!-- Small modal -->
549 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
550
551 <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
552   <div class="modal-dialog modal-sm">
553     <div class="modal-content">
554       ...
555     </div>
556   </div>
557 </div>
558 {% endhighlight %}
559
560 <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
561   <div class="modal-dialog modal-xl">
562     <div class="modal-content">
563
564       <div class="modal-header">
565         <h5 class="modal-title h4" id="myExtraLargeModalLabel">Extra large modal</h5>
566         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
567           <span aria-hidden="true">&times;</span>
568         </button>
569       </div>
570       <div class="modal-body">
571         ...
572       </div>
573     </div>
574   </div>
575 </div>
576
577 <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
578   <div class="modal-dialog modal-lg">
579     <div class="modal-content">
580
581       <div class="modal-header">
582         <h5 class="modal-title h4" id="myLargeModalLabel">Large modal</h5>
583         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
584           <span aria-hidden="true">&times;</span>
585         </button>
586       </div>
587       <div class="modal-body">
588         ...
589       </div>
590     </div>
591   </div>
592 </div>
593
594 <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
595   <div class="modal-dialog modal-sm">
596     <div class="modal-content">
597       <div class="modal-header">
598         <h5 class="modal-title h4" id="mySmallModalLabel">Small modal</h5>
599         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
600           <span aria-hidden="true">&times;</span>
601         </button>
602       </div>
603       <div class="modal-body">
604         ...
605       </div>
606     </div>
607   </div>
608 </div>
609
610 ## Usage
611
612 The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
613
614 ### Via data attributes
615
616 Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
617
618 {% highlight html %}
619 <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
620 {% endhighlight %}
621
622 ### Via JavaScript
623
624 Call a modal with id `myModal` with a single line of JavaScript:
625
626 {% highlight js %}$('#myModal').modal(options){% endhighlight %}
627
628 ### Options
629
630 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`.
631
632 <table class="table table-bordered table-striped">
633   <thead>
634     <tr>
635       <th style="width: 100px;">Name</th>
636       <th style="width: 50px;">Type</th>
637       <th style="width: 50px;">Default</th>
638       <th>Description</th>
639     </tr>
640   </thead>
641   <tbody>
642     <tr>
643       <td>backdrop</td>
644       <td>boolean or the string <code>'static'</code></td>
645       <td>true</td>
646       <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
647     </tr>
648     <tr>
649       <td>keyboard</td>
650       <td>boolean</td>
651       <td>true</td>
652       <td>Closes the modal when escape key is pressed</td>
653     </tr>
654     <tr>
655       <td>focus</td>
656       <td>boolean</td>
657       <td>true</td>
658       <td>Puts the focus on the modal when initialized.</td>
659     </tr>
660     <tr>
661       <td>show</td>
662       <td>boolean</td>
663       <td>true</td>
664       <td>Shows the modal when initialized.</td>
665     </tr>
666   </tbody>
667 </table>
668
669 ### Methods
670
671 {% include callout-danger-async-methods.md %}
672
673 #### `.modal(options)`
674
675 Activates your content as a modal. Accepts an optional options `object`.
676
677 {% highlight js %}
678 $('#myModal').modal({
679   keyboard: false
680 })
681 {% endhighlight %}
682
683 #### `.modal('toggle')`
684
685 Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
686
687 {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
688
689 #### `.modal('show')`
690
691 Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
692
693 {% highlight js %}$('#myModal').modal('show'){% endhighlight %}
694
695 #### `.modal('hide')`
696
697 Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
698
699 {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
700
701 #### `.modal('handleUpdate')`
702
703 Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
704
705 {% highlight js %}$('#myModal').modal('handleUpdate'){% endhighlight %}
706
707 #### `.modal('dispose')`
708
709 Destroys an element's modal.
710
711 ### Events
712
713 Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
714
715 <table class="table table-bordered table-striped">
716   <thead>
717     <tr>
718       <th style="width: 150px;">Event Type</th>
719       <th>Description</th>
720     </tr>
721   </thead>
722   <tbody>
723     <tr>
724       <td>show.bs.modal</td>
725       <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>
726     </tr>
727     <tr>
728       <td>shown.bs.modal</td>
729       <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>
730     </tr>
731     <tr>
732       <td>hide.bs.modal</td>
733       <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
734     </tr>
735     <tr>
736       <td>hidden.bs.modal</td>
737       <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
738     </tr>
739   </tbody>
740 </table>
741
742 {% highlight js %}
743 $('#myModal').on('hidden.bs.modal', function (e) {
744   // do something...
745 })
746 {% endhighlight %}