Modal
Docs UI Kit uses Bootstrap’s modal plugin, so add dialogs to your site for lightboxes, user notifications, or completely custom content.
How it works
- 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. - Clicking on the modal “backdrop” will automatically close the modal.
- Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
- 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.modalwithin another fixed element. - Once again, due to
position: fixed, there are some caveats with using modals on mobile devices. See our browser support docs for details. - Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
Keep reading for demos and usage guidelines.
Example
<a class="btn btn-primary" href="#"
data-toggle="modal"
data-target="#exampleModal">Launch demo modal</a>
<!-- Modal -->
<div id="exampleModal" class="modal fade" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
For more examples, see the official Bootstrap documentation.
Usage
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.
Via data attributes
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.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>