@yuanqing/modal
v0.1.0
Published
Super-simple modals in vanilla JavaScript.
Downloads
6
Maintainers
Readme
modal.js
Super-simple modals in vanilla JavaScript.
Features
- 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
Usage
<!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');
var m = modal(elem [, opts])
elem
— A DOM element.opts
— An object literal:Key | Description | Default :--|:--|:--
dialogSelector
| Selector for the dialog box DOM element |.modal__dialog
showSelector
| Clicking on elements that match this selector will show the modal |.js-modal-show
hideSelector
| Clicking on elements that match this selector will hide the modal |.js-modal-hide
scrollTop
| Whether to always scroll to the top of the modal when it is shown |true
fade
| Whether to apply a fade effect | If truthy,{ duration: .2s, timingFunction: 'ease' }
, elsefalse
onShow
| Called when the modal is shown |function() {}
onShowEnd
| Called at the end of the fade-in effect |function() {}
onHide
| Called when the modal is hidden |function() {}
onShowEnd
| Called at the end of the fade-out effect |function() {}
- The signature of the
onShow
andonHide
callbacks is(elem, triggerElem)
, wheretriggerElem
is the particular DOM element that triggered the show or hide. - The signature of the
onShowEnd
andonHideEnd
callbacks is(elem)
. Iffade
isfalse
, these callbacks are invoked immediately afteronShow
andonHide
respectively.
- The signature of the
m.show()
Shows the modal.
m.hide()
Hides the modal.
m.isVisible
Is true
when the modal is visible, else is false
.
Implementation details
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: hidden
onbody
- Set
opacity: 0
anddisplay: block
on the modalelem
- On the next tick, set
opacity: 1
onelem
- Set
When fading out:
- Unset
overflow: hidden
onbody
- Set
opacity: 0
on the modalelem
- At the end of the CSS transition, set
display: none
onelem
- Unset
Installation
Install via npm:
$ npm i --save @yuanqing/modal
Install via bower:
$ bower i --save yuanqing/modal
Changelog
- 0.0.1
- Initial release