Modals

Use Bootstrap’s JavaScript modal plugin to 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

Launch demo modal

    <!-- Modal -->
    <div id="exampleModal" class="modal fade" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog rounded py-5" role="document">
      <div class="modal-content py-5">
        <header class="modal-header flex-column justify-content-center border-0 mb-3 mb-xl-5">
          <h4 id="exampleModalLabel" class="modal-title mx-auto">Modal title</h4>
        </header>

        <div class="modal-body pt-3 mb-5 mb-md-7 text-center">
          <p>Modal body text goes here.</p>
        </div>

        <footer class="modal-footer justify-content-between border-0">
          <p>Modal footer text goes here.</p>
        </footer>
      </div>
    </div>
    </div>
    <!-- End Modal -->

## 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)

##### Modal title

Modal content..