Alpine Dialog

Table of Contents

Bring the power of AlpineJs to the HTML dialog.

See it in action here


You can use this plugin by either installing it using NPM or including it from a CDN.


You can install it from NPM and include it in your bundle:

npm install @fylgja/alpinejs-dialog
import Alpine from 'alpinejs';
import dialog from '@fylgja/alpinejs-dialog';

window.Alpine = Alpine;



You can include the CDN version of this plugin as a <script> tag, just make sure to include it before AlpineJs.

<script defer src=""></script>
<script defer src=""></script>

How to use

To use this, create an Alpine component for example, like;

<div x-data="{ open: false }">
    <button @click="open = !open">Open</button>
    <dialog x-show="open" x-dialog="open = false">..</dialog>

When adding the x-dialog to an x-show element, it will not toggle the display, but instead use the native el.showModal() function.

The value inside the x-dialog is not required, but is recommended to close the dialog using the escape key or clicking the backdrop.



To lock the page scroll add the modifier noscroll;

<div x-data="{ open: false }">
    <button @click="open = !open">Open</button>
    <dialog x-show="open" x-dialog.noscroll="open = false">..</dialog>

This will now prevent any scrolling on the page.

Noticed a typo or is something unclear? Help us improve this page on GitHub.