https://github.com/luncheon/html-native-modal

Dead simple modal library based on the HTML 5.2 native HTMLDialogElement.
https://github.com/luncheon/html-native-modal

dialog modal vanilla-js

Last synced: 20 days ago
JSON representation

Dead simple modal library based on the HTML 5.2 native HTMLDialogElement.

• Host: GitHub
• URL: https://github.com/luncheon/html-native-modal
• Owner: luncheon
• License: wtfpl
• Created: 2020-07-15T14:14:08.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-04T10:13:36.000Z (3 months ago)
• Last Synced: 2024-10-29T01:08:54.325Z (2 months ago)
• Topics: dialog, modal, vanilla-js
• Language: JavaScript
• Homepage: https://luncheon.github.io/html-native-modal/index.html
• Size: 70.3 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# html-native-modal

Dead simple modal library based on the HTML 5.2 native ``.

* APIs are based on the [`HTMLDialogElement` spec](https://www.w3.org/TR/html52/interactive-elements.html#the-dialog-element).  

(See also [HTMLDialogElement - Web APIs | MDN](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement))

  - `` tag

  - `dialogElement.showModal()` method

  - `dialogElement.close()` method

  - `cancel` event

* No dependencies. No polyfills. Works with any framework.

* Tiny. JS < 100 lines, CSS < 100 lines.

* Works in IE 11.

[Demo](https://luncheon.github.io/html-native-modal/index.html)

[Preact + TypeScript (TSX) example on CodeSandbox](https://codesandbox.io/s/html-native-modal-on-preact-rwt8y?file=/index.tsx)

[Nested modals example on CodePen](https://codepen.io/luncheon/pen/wvGWaLx/left/)

## Installation

### npm

```bash

npm i html-native-modal

```

### CDN

```html

```

### Download

* html-native-modal.min.css

* html-native-modal.min.js

## Usage

```html

Open

  Close

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...


```

[Run on CodePen](https://codepen.io/luncheon/pen/MWyewoz/left/)

## Canceling Canceling

By default, pressing the `Esc` key or clicking on the background will close the dialog.  

To disable this behavior, listen for the `cancel` event and call `event.preventDefault()`.

```html

  Close

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...


  document

    .getElementById('my-modal')

    .addEventListener('cancel', function (event) {

      event.preventDefault()

    });

```

[Run on CodePen](https://codepen.io/luncheon/pen/JjXKdLd/left/)

Inlined `...` does not work on the browsers that don't support `HTMLDialogElement` natively.

## License

[WTFPL](http://www.wtfpl.net)

## Other Vanilla JS Modal Packages

* https://github.com/Ghosh/micromodal

* https://github.com/robinparisi/tingle

* https://github.com/edenspiekermann/a11y-dialog

* https://github.com/KaneCohen/modal-vanilla

* https://github.com/hubspot/vex