Modal

<div x-data="{ open: false }">
  <button class="btn btn-primary" @click="open = true">Open Modal</button>

  <div class="modal-overlay" x-show="open"
       x-transition @click.self="open = false"
       @keydown.escape.window="open = false">
    <div class="modal modal-md">
      <div class="modal-header">
        <span class="modal-title">Title</span>
        <button class="modal-close" @click="open = false">✕</button>
      </div>
      <div class="modal-body">
        <p>Content here.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" @click="open = false">Cancel</button>
        <button class="btn btn-danger" @click="open = false">Confirm</button>
      </div>
    </div>
  </div>
</div>