Fylgja - AlpineJS Dialog

Bring the power and simplicity of Alpine.js to the native HTML <dialog> element.

Live Demo: https://alpinejs-dialog.netlify.app/

Installation

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

Via NPM

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;

Alpine.plugin(dialog);
Alpine.start();

Via CDN

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

<script defer src="https://unpkg.com/@fylgja/alpinejs-dialog/dist/index.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

Usage

To utilize the x-htmldialog plugin, add the directive to an HTML <dialog> element that is also controlled by x-show.

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

When the x-htmldialog directive is present on an x-show element:

It prevents x-show from directly toggling the display style.
Instead, it uses the native el.showModal() function to display the dialog.
The optional value provided to x-htmldialog (e.g., "open = false") is executed when the dialog is closed by pressing the Escape key or clicking outside the dialog (the backdrop).

Modifiers

The x-htmldialog directive supports modifiers to further customize its behavior.

`noscroll`

The noscroll modifier prevents scrolling on the background page while the dialog is open.

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

`closeby`

The closeby modifier allows you to control which events trigger the close action defined in the x-htmldialog value (backdrop click and/or Escape key press).

This mimics the upcoming native closeby behavior of the <dialog> element.

Available options for the closeby modifier:

.auto (Same as .closerequest). Only triggers the close action on the Escape key press.
.none Disables all automatic close triggers (backdrop click and Escape key).
.closerequest Only triggers the close action on the Escape key press.
.any (Default behavior if no closeby modifier is present). Triggers the close action on both backdrop clicks and Escape key presses.

Example, for disable all automatic closing:

<dialog x-show="open" x-htmldialog.closeby.none="open = false">...</dialog>

This way you can keep the close trigger for form submissions and prevent any other close triggers.