Best Practices

• Use Modals sparingly.
• Modals are meant to disrupt the user’s flow for important choices.
• On a small phone, all content and all user interface elements must be seen within a single screen height.
• Any buttons that close or cancel the modal should get initial focus.
• Modals hold focus until the action is completed or dismissed.
• Do not use modals to notify a user of a successful or unsuccessful action; Use a Toast instead.
• Do not use forms in a modal.
• Tabbing should only cycle between the buttons inside the Modal.
• For accessibility reasons do not close the modal by tapping the modal backdrop.
• For accessibility reasons pressing ESC should close or cancel the modal.

Usage

Launch demo modal

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalID" data-bs-toggle="modal" data-bs-target="#ModalID">Launch demo modal</button>

<!-- this is the actual modal markup -->
<div class="modal fade" id="ModalID" tabindex="-1" role="dialog" data-backdrop="static" data-bs-backdrop="static" aria-labelledby="ModalTitle" aria-hidden="true" aria-describedby="ModalTitle">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title" id="ModalTitle">
          <span class="fas fa-bell text-primary-10 mr-1 me-1" aria-hidden="true"></span>Modal Title
        </h1>
        <button type="button" class="close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p><strong>For strong text, use this markup!</strong></p>
        <p class="mb-0">For regular text, use this markup. But you can still insert <span class="fw-bold">strong text</span> in this. Now, ready for the question?</p>
      </div>
      <div class="modal-footer">
        <form method="post">
          <button type="button" class="btn btn-outline-ui" id="resetTimer" data-dismiss="modal" data-bs-dismiss="modal">Choice</button>
          <button type="button" class="btn btn-primary" id="logout_url">Main Choice</button>
        </form>
      </div>
    </div>
  </div>
</div>

Resources

• Bootstrap Documentation - Modal