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 .modal within 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

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>
                
              

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

                
                  $('#myModal').modal(options)