<script src="//unpkg.com/@fylgja/alpinejs-dialog" defer></script>
<script src="//unpkg.com/alpinejs" defer></script>
 
<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>
 
    <dialog x-show="open" x-htmldialog="open = false">
      Content...
    </dialog>
</div>

Meet x-htmldialog, an Alpine.js plugin that makes working with native HTML <dialog> elements a breeze. Attach the x-htmldialog directive to your x-show elements to unlock native modal functionality, with default support for escape key and backdrop closing.

See the full details on fylgja.dev.

More Dialog examples are found on the UI Components on Fylgja.dev