A modal dialog that's opened with a <details> button.
Clone or download
Latest commit 27084da Sep 13, 2018

README.md

<details-dialog> element

A modal dialog that's opened with a <details> button.

Installation

$ npm install --save details-dialog-element

Usage

import 'details-dialog-element'
<details>
  <summary>Open dialog</summary>
  <details-dialog>
    Modal content
    <button type="button" data-close-dialog>Close</button>
  </details-dialog>
</details>

Events

details-dialog:will-close

A details-dialog:will-close event is fired when a request to close the dialog is made either by pressing escape, clicking a data-close-dialog element, clicking on the <summary> element, or when .toggle(false) is called on an open dialog.

This event can be cancelled to keep the dialog open.

document.addEventListener('details-dialog:will-close', function(event) {
  if (!confirm('Are you sure?')) {
    event.preventDefault()
  }
})

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer 11
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.