https://github.com/fylgja/alpinejs-dialog
Bring the power of AlpineJs to the HTML dialog.
https://github.com/fylgja/alpinejs-dialog
alpine alpinejs alpinejs-plugin dialog fylgja htmldialog
Last synced: 3 months ago
JSON representation
Bring the power of AlpineJs to the HTML dialog.
- Host: GitHub
- URL: https://github.com/fylgja/alpinejs-dialog
- Owner: fylgja
- License: mit
- Created: 2022-08-29T21:20:11.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-08-01T14:37:31.000Z (4 months ago)
- Last Synced: 2025-08-01T16:34:10.654Z (4 months ago)
- Topics: alpine, alpinejs, alpinejs-plugin, dialog, fylgja, htmldialog
- Language: HTML
- Homepage: https://fylgja.dev/
- Size: 93.8 KB
- Stars: 31
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Fylgja - AlpineJS Dialog
[](https://www.npmjs.com/package/@fylgja/alpinejs-dialog)
[](/LICENSE)
[](https://alpinejs-dialog.netlify.app/)
Bring the power and simplicity of Alpine.js to the native HTML `` 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:
```bash
npm install @fylgja/alpinejs-dialog
```
```js
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 `` tag,
just make sure to include it before AlpineJs.
```html
<script defer src="https://unpkg.com/@fylgja/alpinejs-dialog/dist/index.min.js">
```
## Usage
To utilize the `x-htmldialog` plugin, add the directive to an HTML `` element that is also controlled by `x-show`.
```html
Open
..
```
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.
```html
Open
..
```
#### `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 `` 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:
```html
...
```
This way you can keep the close trigger for form submissions and prevent any other close triggers.