0.3.0 • Published 4 years ago
html-native-modal v0.3.0
html-native-modal
Dead simple modal library based on the HTML 5.2 native <dialog>.
- APIs are based on the
HTMLDialogElementspec.
(See also HTMLDialogElement - Web APIs | MDN)<dialog>tagdialogElement.showModal()methoddialogElement.close()methodcancelevent
- No dependencies. No polyfills. Works with any framework.
- Tiny. JS < 100 lines, CSS < 100 lines.
- Works in IE 11.
Preact + TypeScript (TSX) example on CodeSandbox
Nested modals example on CodePen
Installation
npm
npm i html-native-modalCDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/html-native-modal@0.3.0/html-native-modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/html-native-modal@0.3.0"></script>Download
- html-native-modal.min.css
- html-native-modal.min.js
Usage
<link rel="stylesheet" href="html-native-modal.min.css">
<script src="html-native-modal.min.js"></script>
<button onclick="this.nextElementSibling.showModal()">Open</button>
<dialog style="width: 480px; padding: 16px 32px;">
<button style="float: right;" onclick="this.parentElement.close()">Close</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
</dialog>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().
<dialog id="my-modal" style="width: 480px; padding: 16px 32px;">
<button style="float: right;" onclick="this.parentElement.close()">Close</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p>
</dialog>
<script>
document
.getElementById('my-modal')
.addEventListener('cancel', function (event) {
event.preventDefault()
});
</script>Inlined <dialog oncancel="arguments[0].preventDefault()">...</dialog> does not work on the browsers that don't support HTMLDialogElement natively.