@octoper/details-dialog-element

<details-dialog> element

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

Based on Github's <details-dialog-element> but removed support for <include-fragment> element.

Installation

$ npm install --save @octoper/details-dialog-element

Usage

import '@octoper/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-close

details-dialog-close event is fired from <details-dialog> when a request to close the dialog is made from

• pressing escape,
• clicking on summary, [data-close-dialog], or
• dialog.toggle(false)

This event bubbles, and can be canceled to keep the dialog open.

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

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.