Documentation
Components
Modal

Modal

Default

We use this line code where the modal class is to apply show class to control the function of modal.

<div>
  <label class="btn success solid">Open modal</label>
  <!-- remove `modal-overlay` element will make modal opened without overlay -->
  <label class="modal-overlay"></label>
  <!-- show class here will make modal visible -->
  <div class="modal flex flex-col gap-5">
    <button class="absolute right-4 top-3">✕</button>
    <h2 class="text-xl">Modal title</h2>
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorum voluptate ratione dicta. Maxime
      cupiditate, est commodi consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis iste quasi
      alias!</span
    >
    <div class="flex gap-3">
      <button class="btn solid danger flex-1">Delete</button>
      <button class="btn solid bw flex-1">Cancel</button>
    </div>
  </div>
</div>

Pause scroll

Use pause-scroll class at modal layer will make page scroll paused when the modal opened.