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>
Modal title
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!Pause scroll
Use pause-scroll
class at modal
layer will make page scroll paused when the modal opened.