dom-modal

Standalone modal for the browser, with overlay

Usage no npm install needed!

<script type="module">
  import domModal from 'https://cdn.skypack.dev/dom-modal';
</script>

README

dom-modal Dependency Status devDependency Status

Standalone modal for the browser.

  • CSS centered
  • No width or height needed. But it works if you provide them
  • Overlay included
  • Overlay click closes the modal
  • Esc key closes the modal
  • No external dependencies, all-in-one JavaScript file
  • ~3.5K minified gzipped
  • Easy to style
  • Works on IE9+

screenshot

npm install dom-modal --save

usage

var modal = require('dom-modal');
var content = document.createElement('div');
content.innerHTML = "Hello modal";

var myModal = modal(content);

myModal.show();
myModal.hide();

myModal.on('show', console.log);
myModal.on('hide', console.log);

test

npm test

example

npm run example

Then open http://0.0.0.0:8080/example.html in a browser.

styling

See the css files: overlay.css, modal.css.

Just overwrite the styles you want.

credits

CSS techniques by:

And modified by me for IE11.