0.1.0 • Published 9 years ago
@yuanqing/modal v0.1.0
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