src/scss/bootstrap-4.0.0-alpha.6/docs/components/modal.md

   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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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 %}