How to use Bootstrap Modal

Modal is a responsive popup used to display extra content. That includes prompts, configurations, cookie consents, etc.

To use modal you need:

  • A trigger (for example a button)
  • Modal itself

After clicking the trigger (button) the modal is launched

        
            
          <!-- Button trigger modal -->
          <button
            type="button"
            class="btn btn-primary"
            data-mdb-toggle="modal"
            data-mdb-target="#exampleModal"
          >
            Launch demo modal
          </button>

          <!-- Modal -->
          <div
            class="modal fade"
            id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">
                    Modal title
                  </h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-mdb-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
                    Close
                  </button>
                  <button type="button" class="btn btn-primary">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
        
        
    

Some details:

  • 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.
  • 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:

You can launch the modal via data attributes or via JavaScript

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-mdb-toggle="modal" on a controller element, like a button, along with a data-mdb-target="#foo" or href="#foo" to target a specific modal to toggle.

        
            
          <button type="button" data-mdb-toggle="modal" data-mdb-target="#myModal">
            Launch modal
          </button>
        
        
    

Via JavaScript

Create a modal with a single line of JavaScript:

        
            
          const myModal = new mdb.Modal(document.getElementById('myModal'), options)