]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: docs | |
3 | title: Modal | |
4 | description: Learn how to use Bootstrap's modals to add dialog prompts to your site. | |
5 | group: components | |
6 | --- | |
7 | ||
8 | Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more. | |
9 | ||
10 | ## Contents | |
11 | ||
12 | * Will be replaced with the ToC, excluding the "Contents" header | |
13 | {:toc} | |
14 | ||
15 | ## How it works | |
16 | ||
17 | Before getting started with Bootstrap's modal component, be sure to read the following as our menu options have recently changed. | |
18 | ||
19 | - 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. | |
20 | - Clicking on the modal "backdrop" will automatically close the modal. | |
21 | - Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. | |
22 | - 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. | |
23 | - One again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details. | |
24 | - Lastly, the `autofocus` HTML attribute has no affect in modals. Here's how you can achieve the same effect with custom JavaScript. | |
25 | ||
26 | Keep reading for demos and usage guidelines. | |
27 | ||
28 | ||
29 | - 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: | |
30 | ||
31 | {% highlight js %} | |
32 | $('#myModal').on('shown.bs.modal', function () { | |
33 | $('#myInput').focus() | |
34 | }) | |
35 | {% endhighlight %} | |
36 | ||
37 | ## Examples | |
38 | ||
39 | ### Modal components | |
40 | ||
41 | 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. | |
42 | ||
43 | <div class="bd-example bd-example-modal"> | |
44 | <div class="modal"> | |
45 | <div class="modal-dialog" role="document"> | |
46 | <div class="modal-content"> | |
47 | <div class="modal-header"> | |
48 | <h5 class="modal-title">Modal title</h5> | |
49 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
50 | <span aria-hidden="true">×</span> | |
51 | </button> | |
52 | </div> | |
53 | <div class="modal-body"> | |
54 | <p>Modal body text goes here.</p> | |
55 | </div> | |
56 | <div class="modal-footer"> | |
57 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
58 | <button type="button" class="btn btn-primary">Save changes</button> | |
59 | </div> | |
60 | </div> | |
61 | </div> | |
62 | </div> | |
63 | </div> | |
64 | ||
65 | {% highlight html %} | |
66 | <div class="modal fade"> | |
67 | <div class="modal-dialog" role="document"> | |
68 | <div class="modal-content"> | |
69 | <div class="modal-header"> | |
70 | <h5 class="modal-title">Modal title</h5> | |
71 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
72 | <span aria-hidden="true">×</span> | |
73 | </button> | |
74 | </div> | |
75 | <div class="modal-body"> | |
76 | <p>Modal body text goes here.</p> | |
77 | </div> | |
78 | <div class="modal-footer"> | |
79 | <button type="button" class="btn btn-primary">Save changes</button> | |
80 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
81 | </div> | |
82 | </div> | |
83 | </div> | |
84 | </div> | |
85 | {% endhighlight %} | |
86 | ||
87 | ### Live demo | |
88 | ||
89 | Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. | |
90 | ||
91 | <div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true"> | |
92 | <div class="modal-dialog" role="document"> | |
93 | <div class="modal-content"> | |
94 | <div class="modal-header"> | |
95 | <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5> | |
96 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
97 | <span aria-hidden="true">×</span> | |
98 | </button> | |
99 | </div> | |
100 | <div class="modal-body"> | |
101 | <p>Woohoo, you're reading this text in a modal!</p> | |
102 | </div> | |
103 | <div class="modal-footer"> | |
104 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
105 | <button type="button" class="btn btn-primary">Save changes</button> | |
106 | </div> | |
107 | </div> | |
108 | </div> | |
109 | </div> | |
110 | ||
111 | <div class="bd-example"> | |
112 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive"> | |
113 | Launch demo modal | |
114 | </button> | |
115 | </div> | |
116 | ||
117 | {% highlight html %} | |
118 | <!-- Button trigger modal --> | |
119 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> | |
120 | Launch demo modal | |
121 | </button> | |
122 | ||
123 | <!-- Modal --> | |
124 | <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |
125 | <div class="modal-dialog" role="document"> | |
126 | <div class="modal-content"> | |
127 | <div class="modal-header"> | |
128 | <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> | |
129 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
130 | <span aria-hidden="true">×</span> | |
131 | </button> | |
132 | </div> | |
133 | <div class="modal-body"> | |
134 | ... | |
135 | </div> | |
136 | <div class="modal-footer"> | |
137 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
138 | <button type="button" class="btn btn-primary">Save changes</button> | |
139 | </div> | |
140 | </div> | |
141 | </div> | |
142 | </div> | |
143 | {% endhighlight %} | |
144 | ||
145 | ### Scrolling long content | |
146 | ||
147 | 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. | |
148 | ||
149 | <div id="exampleModalLong" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> | |
150 | <div class="modal-dialog" role="document"> | |
151 | <div class="modal-content"> | |
152 | <div class="modal-header"> | |
153 | <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> | |
154 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
155 | <span aria-hidden="true">×</span> | |
156 | </button> | |
157 | </div> | |
158 | <div class="modal-body"> | |
159 | <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> | |
160 | <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> | |
161 | <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> | |
162 | <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> | |
163 | <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> | |
164 | <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> | |
165 | <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> | |
166 | <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> | |
167 | <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> | |
168 | <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> | |
169 | <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> | |
170 | <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> | |
171 | <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> | |
172 | <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> | |
173 | <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> | |
174 | <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> | |
175 | <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> | |
176 | <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> | |
177 | </div> | |
178 | <div class="modal-footer"> | |
179 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
180 | <button type="button" class="btn btn-primary">Save changes</button> | |
181 | </div> | |
182 | </div> | |
183 | </div> | |
184 | </div> | |
185 | ||
186 | <div class="bd-example"> | |
187 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> | |
188 | Launch demo modal | |
189 | </button> | |
190 | </div> | |
191 | ||
192 | {% highlight html %} | |
193 | <!-- Button trigger modal --> | |
194 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> | |
195 | Launch demo modal | |
196 | </button> | |
197 | ||
198 | <!-- Modal --> | |
199 | <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> | |
200 | <div class="modal-dialog" role="document"> | |
201 | <div class="modal-content"> | |
202 | <div class="modal-header"> | |
203 | <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> | |
204 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
205 | <span aria-hidden="true">×</span> | |
206 | </button> | |
207 | </div> | |
208 | <div class="modal-body"> | |
209 | ... | |
210 | </div> | |
211 | <div class="modal-footer"> | |
212 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
213 | <button type="button" class="btn btn-primary">Save changes</button> | |
214 | </div> | |
215 | </div> | |
216 | </div> | |
217 | </div> | |
218 | {% endhighlight %} | |
219 | ||
220 | ### Tooltips and popovers | |
221 | ||
222 | [Tooltips]({{ site.baseurl }}/components/tooltips/) and [popovers]({{ site.baseurl }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. | |
223 | ||
224 | <div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true"> | |
225 | <div class="modal-dialog" role="document"> | |
226 | <div class="modal-content"> | |
227 | <div class="modal-header"> | |
228 | <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5> | |
229 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
230 | <span aria-hidden="true">×</span> | |
231 | </button> | |
232 | </div> | |
233 | <div class="modal-body"> | |
234 | <h5>Popover in a modal</h5> | |
235 | <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> | |
236 | <hr> | |
237 | <h5>Tooltips in a modal</h5> | |
238 | <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> | |
239 | </div> | |
240 | <div class="modal-footer"> | |
241 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
242 | <button type="button" class="btn btn-primary">Save changes</button> | |
243 | </div> | |
244 | </div> | |
245 | </div> | |
246 | </div> | |
247 | ||
248 | <div class="bd-example"> | |
249 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalPopovers"> | |
250 | Launch demo modal | |
251 | </button> | |
252 | </div> | |
253 | ||
254 | {% highlight html %} | |
255 | <div class="modal-body"> | |
256 | <h5>Popover in a modal</h5> | |
257 | <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> | |
258 | <hr> | |
259 | <h5>Tooltips in a modal</h5> | |
260 | <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> | |
261 | </div> | |
262 | {% endhighlight %} | |
263 | ||
264 | ### Using the grid | |
265 | ||
266 | 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. | |
267 | ||
268 | <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true"> | |
269 | <div class="modal-dialog" role="document"> | |
270 | <div class="modal-content"> | |
271 | <div class="modal-header"> | |
272 | <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5> | |
273 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
274 | </div> | |
275 | <div class="modal-body"> | |
276 | <div class="container-fluid bd-example-row"> | |
277 | <div class="row"> | |
278 | <div class="col-md-4">.col-md-4</div> | |
279 | <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> | |
280 | </div> | |
281 | <div class="row"> | |
282 | <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> | |
283 | <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> | |
284 | </div> | |
285 | <div class="row"> | |
286 | <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> | |
287 | </div> | |
288 | <div class="row"> | |
289 | <div class="col-sm-9"> | |
290 | Level 1: .col-sm-9 | |
291 | <div class="row"> | |
292 | <div class="col-8 col-sm-6"> | |
293 | Level 2: .col-8 .col-sm-6 | |
294 | </div> | |
295 | <div class="col-4 col-sm-6"> | |
296 | Level 2: .col-4 .col-sm-6 | |
297 | </div> | |
298 | </div> | |
299 | </div> | |
300 | </div> | |
301 | </div> | |
302 | </div> | |
303 | <div class="modal-footer"> | |
304 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
305 | <button type="button" class="btn btn-primary">Save changes</button> | |
306 | </div> | |
307 | </div> | |
308 | </div> | |
309 | </div> | |
310 | ||
311 | <div class="bd-example"> | |
312 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#gridSystemModal"> | |
313 | Launch demo modal | |
314 | </button> | |
315 | </div> | |
316 | ||
317 | {% highlight html %} | |
318 | <div class="modal-body"> | |
319 | <div class="container-fluid"> | |
320 | <div class="row"> | |
321 | <div class="col-md-4">.col-md-4</div> | |
322 | <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> | |
323 | </div> | |
324 | <div class="row"> | |
325 | <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> | |
326 | <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> | |
327 | </div> | |
328 | <div class="row"> | |
329 | <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> | |
330 | </div> | |
331 | <div class="row"> | |
332 | <div class="col-sm-9"> | |
333 | Level 1: .col-sm-9 | |
334 | <div class="row"> | |
335 | <div class="col-8 col-sm-6"> | |
336 | Level 2: .col-8 .col-sm-6 | |
337 | </div> | |
338 | <div class="col-4 col-sm-6"> | |
339 | Level 2: .col-4 .col-sm-6 | |
340 | </div> | |
341 | </div> | |
342 | </div> | |
343 | </div> | |
344 | </div> | |
345 | </div> | |
346 | {% endhighlight %} | |
347 | ||
348 | ### Varying modal content | |
349 | ||
350 | 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/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. | |
351 | ||
352 | Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`. | |
353 | ||
354 | {% example html %} | |
355 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> | |
356 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> | |
357 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> | |
358 | ||
359 | <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |
360 | <div class="modal-dialog" role="document"> | |
361 | <div class="modal-content"> | |
362 | <div class="modal-header"> | |
363 | <h5 class="modal-title" id="exampleModalLabel">New message</h5> | |
364 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
365 | <span aria-hidden="true">×</span> | |
366 | </button> | |
367 | </div> | |
368 | <div class="modal-body"> | |
369 | <form> | |
370 | <div class="form-group"> | |
371 | <label for="recipient-name" class="form-control-label">Recipient:</label> | |
372 | <input type="text" class="form-control" id="recipient-name"> | |
373 | </div> | |
374 | <div class="form-group"> | |
375 | <label for="message-text" class="form-control-label">Message:</label> | |
376 | <textarea class="form-control" id="message-text"></textarea> | |
377 | </div> | |
378 | </form> | |
379 | </div> | |
380 | <div class="modal-footer"> | |
381 | <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
382 | <button type="button" class="btn btn-primary">Send message</button> | |
383 | </div> | |
384 | </div> | |
385 | </div> | |
386 | </div> | |
387 | {% endexample %} | |
388 | ||
389 | {% highlight js %} | |
390 | $('#exampleModal').on('show.bs.modal', function (event) { | |
391 | var button = $(event.relatedTarget) // Button that triggered the modal | |
392 | var recipient = button.data('whatever') // Extract info from data-* attributes | |
393 | // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). | |
394 | // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. | |
395 | var modal = $(this) | |
396 | modal.find('.modal-title').text('New message to ' + recipient) | |
397 | modal.find('.modal-body input').val(recipient) | |
398 | }) | |
399 | {% endhighlight %} | |
400 | ||
401 | ### Remove animation | |
402 | ||
403 | For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup. | |
404 | ||
405 | {% highlight html %} | |
406 | <div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true"> | |
407 | ... | |
408 | </div> | |
409 | {% endhighlight %} | |
410 | ||
411 | ### Dynamic heights | |
412 | ||
413 | If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` to readjust the modal's position in case a scrollbar appears. | |
414 | ||
415 | ### Accessibility | |
416 | ||
417 | 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`. | |
418 | ||
419 | ### Embedding YouTube videos | |
420 | ||
421 | 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. | |
422 | ||
423 | ## Optional sizes | |
424 | ||
425 | Modals have two 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. | |
426 | ||
427 | <div class="bd-example"> | |
428 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> | |
429 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button> | |
430 | </div> | |
431 | ||
432 | {% highlight html %} | |
433 | <!-- Large modal --> | |
434 | <button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> | |
435 | ||
436 | <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> | |
437 | <div class="modal-dialog modal-lg"> | |
438 | <div class="modal-content"> | |
439 | ... | |
440 | </div> | |
441 | </div> | |
442 | </div> | |
443 | ||
444 | <!-- Small modal --> | |
445 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button> | |
446 | ||
447 | <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> | |
448 | <div class="modal-dialog modal-sm"> | |
449 | <div class="modal-content"> | |
450 | ... | |
451 | </div> | |
452 | </div> | |
453 | </div> | |
454 | {% endhighlight %} | |
455 | ||
456 | <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> | |
457 | <div class="modal-dialog modal-lg"> | |
458 | <div class="modal-content"> | |
459 | ||
460 | <div class="modal-header"> | |
461 | <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> | |
462 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
463 | <span aria-hidden="true">×</span> | |
464 | </button> | |
465 | </div> | |
466 | <div class="modal-body"> | |
467 | ... | |
468 | </div> | |
469 | </div> | |
470 | </div> | |
471 | </div> | |
472 | ||
473 | <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> | |
474 | <div class="modal-dialog modal-sm"> | |
475 | <div class="modal-content"> | |
476 | <div class="modal-header"> | |
477 | <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> | |
478 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
479 | <span aria-hidden="true">×</span> | |
480 | </button> | |
481 | </div> | |
482 | <div class="modal-body"> | |
483 | ... | |
484 | </div> | |
485 | </div> | |
486 | </div> | |
487 | </div> | |
488 | ||
489 | ## Usage | |
490 | ||
491 | 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. | |
492 | ||
493 | ### Via data attributes | |
494 | ||
495 | 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. | |
496 | ||
497 | {% highlight html %} | |
498 | <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> | |
499 | {% endhighlight %} | |
500 | ||
501 | ### Via JavaScript | |
502 | ||
503 | Call a modal with id `myModal` with a single line of JavaScript: | |
504 | ||
505 | {% highlight js %}$('#myModal').modal(options){% endhighlight %} | |
506 | ||
507 | ### Options | |
508 | ||
509 | Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`. | |
510 | ||
511 | <table class="table table-bordered table-striped table-responsive"> | |
512 | <thead> | |
513 | <tr> | |
514 | <th style="width: 100px;">Name</th> | |
515 | <th style="width: 50px;">Type</th> | |
516 | <th style="width: 50px;">Default</th> | |
517 | <th>Description</th> | |
518 | </tr> | |
519 | </thead> | |
520 | <tbody> | |
521 | <tr> | |
522 | <td>backdrop</td> | |
523 | <td>boolean or the string <code>'static'</code></td> | |
524 | <td>true</td> | |
525 | <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td> | |
526 | </tr> | |
527 | <tr> | |
528 | <td>keyboard</td> | |
529 | <td>boolean</td> | |
530 | <td>true</td> | |
531 | <td>Closes the modal when escape key is pressed</td> | |
532 | </tr> | |
533 | <tr> | |
534 | <td>focus</td> | |
535 | <td>boolean</td> | |
536 | <td>true</td> | |
537 | <td>Puts the focus on the modal when initialized.</td> | |
538 | </tr> | |
539 | <tr> | |
540 | <td>show</td> | |
541 | <td>boolean</td> | |
542 | <td>true</td> | |
543 | <td>Shows the modal when initialized.</td> | |
544 | </tr> | |
545 | </tbody> | |
546 | </table> | |
547 | ||
548 | ### Methods | |
549 | ||
550 | #### `.modal(options)` | |
551 | ||
552 | Activates your content as a modal. Accepts an optional options `object`. | |
553 | ||
554 | {% highlight js %} | |
555 | $('#myModal').modal({ | |
556 | keyboard: false | |
557 | }) | |
558 | {% endhighlight %} | |
559 | ||
560 | #### `.modal('toggle')` | |
561 | ||
562 | 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). | |
563 | ||
564 | {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %} | |
565 | ||
566 | #### `.modal('show')` | |
567 | ||
568 | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). | |
569 | ||
570 | {% highlight js %}$('#myModal').modal('show'){% endhighlight %} | |
571 | ||
572 | #### `.modal('hide')` | |
573 | ||
574 | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). | |
575 | ||
576 | {% highlight js %}$('#myModal').modal('hide'){% endhighlight %} | |
577 | ||
578 | ### Events | |
579 | ||
580 | 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">`). | |
581 | ||
582 | <table class="table table-bordered table-striped table-responsive"> | |
583 | <thead> | |
584 | <tr> | |
585 | <th style="width: 150px;">Event Type</th> | |
586 | <th>Description</th> | |
587 | </tr> | |
588 | </thead> | |
589 | <tbody> | |
590 | <tr> | |
591 | <td>show.bs.modal</td> | |
592 | <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> | |
593 | </tr> | |
594 | <tr> | |
595 | <td>shown.bs.modal</td> | |
596 | <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> | |
597 | </tr> | |
598 | <tr> | |
599 | <td>hide.bs.modal</td> | |
600 | <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> | |
601 | </tr> | |
602 | <tr> | |
603 | <td>hidden.bs.modal</td> | |
604 | <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td> | |
605 | </tr> | |
606 | </tbody> | |
607 | </table> | |
608 | ||
609 | {% highlight js %} | |
610 | $('#myModal').on('hidden.bs.modal', function (e) { | |
611 | // do something... | |
612 | }) | |
613 | {% endhighlight %} |