Modal required alpineJS

Modal

@jrmc.modal({ button: { text: 'Toggle Modal', class: 'btn-primary' } })
  <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
@end
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn btn-primary">
    Toggle Modal
  <template x-teleport="body">
    <dialog :class="open ? 'modal-open' : ''" class="modal " x-show="open" @keyup.escape.window="open = false" >
      <div class="modal-box" @click.outside="open = false">
          <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
      </div>
    </dialog>
  </template>
</button>
@jrmc.modal({ button: { text: 'Toggle Modal', class: 'btn-primary' } })
  <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>

  @slot('action')
    @!jrmc.button({ text: 'ok', ...$context.event.close })
  @end
@end
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn btn-primary">
    Toggle Modal
  <template x-teleport="body">
    <dialog :class="open ? 'modal-open' : ''" class="modal " x-show="open" @keyup.escape.window="open = false" >
      <div class="modal-box" @click.outside="open = false">
          <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>

          <div class="modal-action">
            <button @click="open = false" class="btn">
  ok
</button>
          </div>
      </div>
    </dialog>
  </template>
</button>
@jrmc.modal({ button: { class: 'btn-ghost' } })
  <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>

  @slot('button')
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
  @end
@end
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn btn-ghost">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
  <template x-teleport="body">
    <dialog :class="open ? 'modal-open' : ''" class="modal " x-show="open" @keyup.escape.window="open = false" >
      <div class="modal-box" @click.outside="open = false">
          <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>

      </div>
    </dialog>
  </template>
</button>
@jrmc.modal({ button: { text: 'Toggle Modal' }, outside: false, escape: false })
  @!jrmc.button({ text: 'x', class: 'btn-sm btn-circle absolute right-2 top-2', ...$context.event.close })
  <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
@end
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn">
    Toggle Modal
  <template x-teleport="body">
    <dialog :class="open ? 'modal-open' : ''" class="modal " x-show="open"  >
      <div class="modal-box" >
        <button @click="open = false" class="btn btn-sm btn-circle absolute right-2 top-2">
  x
</button>
  <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
      </div>
    </dialog>
  </template>
</button>
@jrmc.modal({ button: { text: 'Toggle Modal' }, mobile: true })
  <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
@end
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn">
    Toggle Modal
  <template x-teleport="body">
    <dialog :class="open ? 'modal-open' : ''" class="modal modal-bottom sm:modal-middle" x-show="open" @keyup.escape.window="open = false" >
      <div class="modal-box" @click.outside="open = false">
          <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
  <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
      </div>
    </dialog>
  </template>
</button>
@jrmc.modal({ button: { class: 'btn-error' } })
  @slot('button')
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="w-6 h-6"  preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024"><path fill="currentColor" d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"/></svg>
  @end

  <form id="confirm">
    <h3 class="text-lg font-bold">Are you sure ?</h3>
  </form>

  @slot('action')
    @!jrmc.button({ text: 'cancel', class: 'btn-ghost', ...$context.event.close })
    @!jrmc.button({ text: 'ok', class: 'btn-error', form: 'confirm' })
  @end
@end
<button type="button" x-data="{ open: false }" @click="open = ! open" class="btn btn-error">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="w-6 h-6"  preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024"><path fill="currentColor" d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"/></svg>
  <template x-teleport="body">
    <dialog :class="open ? 'modal-open' : ''" class="modal " x-show="open" @keyup.escape.window="open = false" >
      <div class="modal-box" @click.outside="open = false">
        
  <form id="confirm">
    <h3 class="text-lg font-bold">Are you sure ?</h3>
  </form>

          <div class="modal-action">
            <button @click="open = false" class="btn btn-ghost">
  cancel
</button>
<button form="confirm" class="btn btn-error">
  ok
</button>
          </div>
      </div>
    </dialog>
  </template>
</button>