Modals

Modals are a variant of dialog used to present critical information or request user input needed to complete a user’s workflow.

Simple Modal

A very simple modal with some action options. Click on the button below to have a look at the demo & refer to the code.

        
  <button id="simple-modal-btn" class="btn btn-solid-primary">
    Show Modal
  </button>
  <dialog id="simple-modal" class="modal">
    <div class="modal-wrapper">
      <h2 class="modal-header">Modal Header</h2>
      <form method="dialog">
        <button class="modal-action">
          <img
            class="avatar-round avatar-sm"
            src="../../assets/avatarOne.png"
            alt="avatar"
          />
          <div class="list-info">
            <h3>Jane Doe</h3>
            <small class="color-accents-2">Did you pick Jenny?</small>
          </div>
        </button>
        <button class="modal-action">
          <img
            class="avatar-round avatar-sm"
            src="../../assets/avatarTwo.png"
            alt="avatar"
          />
          <div class="list-info">
            <h3>John Doe</h3>
            <small class="color-accents-2">This Sunday, golf?</small>
          </div>
        </button>
        <button class="modal-action">
          <img
            class="avatar-round avatar-sm"
            src="../../assets/avatarThree.png"
            alt="avatar"
          />
          <div class="list-info">
            <h3>Jenny Doe</h3>
            <small class="color-accents-2">Where are you?</small>
          </div>
        </button>
      </form>
    </div>
  </dialog>
        
      

Alert Modal

An alert modal with some alert message & action options. Click on the button below to have a look at the demo & refer to the code.

        
  <button id="alert-modal-btn" class="btn btn-solid-primary">
    Show Modal
  </button>
  <dialog id="alert-modal" class="modal">
    <div class="modal-wrapper">
      <h2 class="modal-header">Modal Header</h2>
      <span class="modal-text">Modal Body Text</span>
      <form method="dialog" class="modal-actions">
        <button class="btn btn-solid-danger modal-action">
          Action 1
        </button>
        <button class="btn btn-solid-safe modal-action">Action 2</button>
      </form>
    </div>
  </dialog>
        
      

Confirmation Modal

A confirmation modal with some options & actions. Click on the button below to have a look at the demo & refer to the code.

        
  <button id="confirmation-modal-btn" class="btn btn-solid-primary">
    Show Modal
  </button>
  <dialog id="confirmation-modal" class="modal">
    <div class="modal-wrapper">
      <h2 class="modal-header">Modal Header</h2>
      <div class="input-group input-radio">
        <input type="radio" name="radio" id="mumbai" />
        <label for="mumbai">Mumbai</label>
      </div>
      <div class="input-group input-radio">
        <input type="radio" name="radio" id="bangalore" />
        <label for="bangalore">Bangalore</label>
      </div>
      <div class="input-group input-radio">
        <input type="radio" name="radio" id="delhi" />
        <label for="delhi">Delhi</label>
      </div>
      <form method="dialog" class="modal-actions">
        <button class="btn btn-solid-danger modal-action">
          Action 1
        </button>
        <button class="btn btn-solid-safe modal-action">Action 2</button>
      </form>
    </div>
  </dialog>