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" id="openModalBtn"> Launch demo modal </button>

<dialog
  id="ModalID"
  class="simple-modal"
  aria-labelledby="ModalTitle"
  aria-describedby="ModalBody"
>
  <div class="simple-modal__content">
    <div class="modal-header">
      <h1 class="modal-title h5 mb-0" id="ModalTitle">
        <span class="icon fas fa-bell text-primary-10 me-1" aria-hidden="true"></span>
        Modal Title
      </h1>
      <button
        type="button"
        class="close btn-close"
        id="closeModalBtn"
        aria-label="Close"
      ></button>
    </div>
    <div class="modal-body" id="ModalBody">
      <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">
      <div class="modal-footer-form">
        <button type="button" class="btn btn-outline-ui" id="choiceBtn"> Choice </button>
        <button type="button" class="btn btn-primary" id="logout_url"> Main Choice </button>
      </div>
    </div>
  </div>
</dialog>

Resources

• Bootstrap Documentation - Modal