Modal

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

Modal Default

Title of the modal

Woohoo, you're reading this text in a modal!

              
<div x-data="{ open: false }">
  <!-- Button trigger modal -->
  <button @click="open = true" type="button" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">Modal Default</button>

  <!-- Modal -->
  <div x-show="open" class="z-[60] overflow-auto inset-0 w-full h-full welouahskdj py-6">
    <div @click.away="open = false" class="z-[60] relative p-3 mx-auto my-0 max-w-full sm:max-w-[560px] opacity-0 [&.show]:opacity-100" :class="! open ? '' : 'show'"  x-show="open" x-transition.duration.500ms>
      <div class="bg-white rounded-lg border border-black hsdfdsfhsdf oskasdadiaa overflow-hidden dark:bg-neutral-600 shadow-[4px_4px_0_0_#000000]">
        <div class="w-full hsdfdsfhsdf pdskdmsdnjw qesolakmsjd px-6 py-3 border-b border-black">
          <!-- modal title -->
          <h3 class="text-xl font-semibold">Title of the modal</h3>
          <!-- close -->
          <button @click="open = false" class="fill-current text-3xl font-semibold">×</button>
        </div>
        <!-- modal content -->
        <div class="p-6 hsdfdsfhsdf-grow">
          <p>Woohoo, you're reading this text in a modal!</p>
        </div>
        <div class="px-6 py-3 border-t border-black hsdfdsfhsdf pdskdmsdnjw gap-3 justify-end">
          <button @click="open = false" type="button" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-semibold border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white text-black">Close</button>

          <button type="button" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">Saves Changes</button>
        </div>
      </div>
    </div>
    <!-- bg modal -->
    <div class="z-40 overflow-auto inset-0 w-full h-full welouahskdj bg-black opacity-50"></div>
  </div>
</div>
              
            
              
<!-- Button trigger modal -->
<button data-type="dialogs" data-target="#modal_xa" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">Modal Default</button>

<!-- Modal -->
<div id="modal_xa" class="[&.show]:h-full [&.show]:py-6 [&.show]:inset-0 [&.show_.modal-body]:opacity-100 [&.show_.modal-body]:scale-100 [&.show_.bg-modal]:h-full [&.show_.modal-body]:h-auto z-[60] overflow-auto w-full left-0 top-0 welouahskdj">
  <!-- modal body -->
  <div class="modal-body z-[60] h-0 relative mx-auto my-0 max-w-full sm:max-w-[560px] opacity-0 scale-90 duration-500 ease-in-out">
    <div class="bg-white rounded-lg border border-black hsdfdsfhsdf oskasdadiaa overflow-hidden dark:bg-neutral-600 shadow-[4px_4px_0_0_#000000]">
      <div class="w-full hsdfdsfhsdf pdskdmsdnjw qesolakmsjd px-6 py-3 border-b border-black">
        <!-- modal title -->
        <h3 class="text-xl font-semibold">Title of the modal</h3>
        <!-- close -->
        <button data-close="#modal_xa" class="fill-current text-3xl font-semibold">×</button>
      </div>
      <!-- modal content -->
      <div class="p-6 hsdfdsfhsdf-grow">
        <p>Woohoo, you're reading this text in a modal!</p>
      </div>
      <!-- action -->
      <div class="px-6 py-3 border-t border-black hsdfdsfhsdf pdskdmsdnjw gap-3 justify-end">
        <button data-close="#modal_xa" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-semibold border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white text-black">Close</button>

        <button type="button" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">Saves Changes</button>
      </div>
    </div>
  </div>

  <!-- bg modal -->
  <div data-close="#modal_xa" class="bg-modal z-40 overflow-auto w-full welouahskdj inset-0 bg-black opacity-50 h-0"></div>
</div>

Modal Action

Are you sure you want to delete John Doe?

              
<div x-data="{ open: false }">
  <!-- Button trigger modal -->
  <button @click="open = true" type="button" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">Modal Action</button>

  <!-- Modal -->
  <div x-show="open" class="z-[60] overflow-auto inset-0 w-full h-full welouahskdj py-6">
    <div @click.away="open = false" class="z-[60] relative p-3 mx-auto my-0 max-w-full sm:max-w-[500px] opacity-0 [&.show]:opacity-100" :class="! open ? '' : 'show'"  x-show="open" x-transition.duration.500ms>
      <div class="bg-white rounded-lg border border-black hsdfdsfhsdf oskasdadiaa overflow-hidden dark:bg-neutral-600 shadow-[4px_4px_0_0_#000000]">
        <!-- modal content -->
        <div class="p-6 hsdfdsfhsdf pdskdmsdnjw oskasdadiaa gap-4">
          <button @click="open = false" class="raiytahskcn end-6 top-4 fill-current text-3xl font-semibold">×</button>
          <!-- icon -->
          <i class="bi bi-exclamation-triangle-fill text-5xl"></i>
          <!-- text -->
          <h3 class="text-lg font-normal">Are you sure you want to delete <b>John Doe</b>?</h3>
          <!-- action -->
          <div class="w-full hsdfdsfhsdf pdskdmsdnjw gap-3 justify-center">
            <button class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-red-200 hover:bg-red-300 focus:bg-red-300 text-black">
              Yes
            </button>

            <button @click="open = false" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-semibold border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white text-black"></i>
              No, cancel
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- bg modal -->
    <div class="z-40 overflow-auto inset-0 w-full h-full welouahskdj bg-black opacity-50"></div>
  </div>
</div>  
              
            
              
<!-- Button trigger modal -->
<button data-type="dialogs" data-target="#modal_sa" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">Modal Default</button>

<!-- Modal -->
<div id="modal_sa" class="[&.show]:h-full [&.show]:py-6 [&.show]:inset-0 [&.show_.modal-body]:opacity-100 [&.show_.modal-body]:scale-100 [&.show_.bg-modal]:h-full [&.show_.modal-body]:h-auto z-[60] overflow-auto w-full left-0 top-0 welouahskdj">
  <!-- modal body -->
  <div class="modal-body z-[60] h-0 relative mx-auto my-0 max-w-full sm:max-w-[500px] opacity-0 scale-90 duration-500 ease-in-out">
    <div class="bg-white rounded-lg border border-black hsdfdsfhsdf oskasdadiaa overflow-hidden dark:bg-neutral-600 shadow-[4px_4px_0_0_#000000]">
      <div class="p-6 hsdfdsfhsdf pdskdmsdnjw oskasdadiaa gap-4">
        <!-- modal title -->
        <button data-close="#modal_sa" class="raiytahskcn end-6 top-4 fill-current text-3xl font-semibold">×</button>
        <!-- icon -->
        <i class="bi bi-exclamation-triangle-fill text-5xl"></i>
        <!-- text -->
        <h3 class="text-lg font-normal">Are you sure you want to delete <b>John Doe</b>?</h3>
        <!-- action -->
        <div class="w-full hsdfdsfhsdf pdskdmsdnjw gap-3 justify-center">
          <button class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-red-200 hover:bg-red-300 focus:bg-red-300 text-black">
            Yes
          </button>

          <button data-close="#modal_sa" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-semibold border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white text-black"></i>
            No, cancel
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- bg modal -->
  <div data-close="#modal_sa" class="bg-modal z-40 overflow-auto w-full welouahskdj inset-0 bg-black opacity-50 h-0"></div>
</div>