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 (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T07:09:31.000Z (3 months ago)
- Last Synced: 2025-04-09T17:13:20.079Z (3 months ago)
- Topics: alpine, alpinejs, alpinejs-plugin, dialog, fylgja, htmldialog
- Language: HTML
- Homepage: https://fylgja.dev/
- Size: 60.5 KB
- Stars: 25
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
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 of AlpineJs to the HTML dialog.
See it in action here 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">
```
## How to use
To use this, create an Alpine component for example, like;
```html
Open
..
```
When adding the `x-htmldialog` to an `x-show` element,
it will not toggle the display,
but instead use the native `el.showModal()` function.
The value inside the `x-htmldialog` is not required,
but is recommended to close the dialog using the escape key or clicking the backdrop.
### Modifiers
#### Scroll-lock
To lock the page scroll add the modifier `noscroll`;
```html
Open
..
```
This will now prevent any scrolling on the page.