Super-simple modals in vanilla JavaScript.
- Define DOM elements on which to trigger show and hide on
click - Trigger show and hide programmatically
- Apply a fade effect
- Vertically centre the modal dialog box on the page
- Hide the modal on hitting the
<Esc>key - Zero dependencies; 2.3 KB minified or 1.0 KB minified and gzipped
<!DOCTYPE html>
<html>
<head>
<title>modal</title>
<meta charset="utf-8">
<style>
.modal {background: rgba(0,0,0,.25); }
.modal__dialog {width: 300px; margin: 25px 0; background: #fff; }
</style>
</head>
<body>
<button class="js-modal-show">Show</button>
<div style="height: 1000px;"><!-- page content --></div>
<div class="modal">
<div class="modal__dialog">
<button class="js-modal-hide">Hide</button>
<div style="height: 1000px;"><!-- modal content --></div>
</div>
</div>
<script src="path/to/modal.min.js"></script>
<script>
var elem = document.querySelector('.modal');
var opts = {
showSelector: '.js-modal-show',
hideSelector: '.js-modal-hide',
dialogSelector: '.modal__dialog',
fade: {
duration: '.2s',
timingFunction: 'ease'
}
};
modal(elem, opts);
</script>
</body>
</html>In the browser, the modal function is a global variable. In Node, do:
var modal = require('@yuanqing/modal');-
elem— A DOM element. -
opts— An object literal:Key Description Default dialogSelectorSelector for the dialog box DOM element .modal__dialogshowSelectorClicking on elements that match this selector will show the modal .js-modal-showhideSelectorClicking on elements that match this selector will hide the modal .js-modal-hidescrollTopWhether to always scroll to the top of the modal when it is shown truefadeWhether to apply a fade effect If truthy, { duration: .2s, timingFunction: 'ease' }, elsefalseonShowCalled when the modal is shown function() {}onShowEndCalled at the end of the fade-in effect function() {}onHideCalled when the modal is hidden function() {}onShowEndCalled at the end of the fade-out effect function() {}- The signature of the
onShowandonHidecallbacks is(elem, triggerElem), wheretriggerElemis the particular DOM element that triggered the show or hide. - The signature of the
onShowEndandonHideEndcallbacks is(elem). Iffadeisfalse, these callbacks are invoked immediately afteronShowandonHiderespectively.
- The signature of the
Shows the modal.
Hides the modal.
Is true when the modal is visible, else is false.
-
Vertically centering the modal dialog box is achieved using the technique described in the CSS Tricks article Centering In the Unknown. The
-
These are the initial inline styles applied on the modal
elem:display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; text-align: center; will-change: transform; -
When fading in:
- Set
overflow: hiddenonbody - Set
opacity: 0anddisplay: blockon the modalelem - On the next tick, set
opacity: 1onelem
- Set
-
When fading out:
- Unset
overflow: hiddenonbody - Set
opacity: 0on the modalelem - At the end of the CSS transition, set
display: noneonelem
- Unset
Install via npm:
$ npm i --save @yuanqing/modal
Install via bower:
$ bower i --save yuanqing/modal
- 0.0.1
- Initial release
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent