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: 22 days 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 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-22T07:06:46.000Z (10 months ago)
• Last Synced: 2024-11-07T18:57:04.906Z (about 1 month ago)
• Topics: alpine, alpinejs, alpinejs-plugin, dialog, fylgja, htmldialog
• Language: HTML
• Homepage: https://fylgja.dev/
• Size: 63.5 KB
• Stars: 22
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fylgja - AlpineJS Dialog

[![NPM version](https://img.shields.io/npm/v/@fylgja/alpinejs-dialog?style=flat-square)](https://www.npmjs.org/package/@fylgja/alpinejs-dialog)

![license](https://img.shields.io/github/license/fylgja/alpinejs-dialog?color=%23234&style=flat-square)

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.