tiny-modal.js
No-nonsense modal windows in vanilla JavaScript. Bring your own CSS.
Features
- Define DOM elements on which to trigger show and hide on
click
- Trigger show and hide programmatically
- Optionally define
onShow
andonHide
callbacks - Hide the modal on hitting the
<Esc>
key - Zero dependencies, and only 1.2 KB minified or 0.59 KB minified and gzipped
Usage
tiny-modal Show <!-- content --> Hide <!-- content -->
In the browser, the tinyModal
function is a global variable. In Node, do:
var tinyModal = ;
var modal = tinyModal(elem [, opts])
-
elem
— Our modal DOM element:- The
elem
passed totinyModal
can contain any arbitrary HTML, with no restrictions on structure or class names - Clicking on
elem
directly (ie. the semi-transparent black overlay in our example), or hitting the<Esc>
key will hide the modal
- The
-
opts
— An object literal:Key Description Default showSelector
Clicking on elements that match this selector will show the modal .modal-show
hideSelector
Clicking on elements that match this selector will hide the modal .modal-hide
onShow
A function that is called once when the modal is shown function() {}
onHide
A function that is called once when the modal is hidden function() {}
scrollTop
Whether to always scroll to the top of elem
when it is showntrue
Note that the signature of both the
onShow
andonHide
callbacks is(triggerElem, elem)
, wheretriggerElem
is the particular DOM element that triggered the show or hide.
modal.show()
Shows the modal.
modal.hide()
Hides the modal.
Implementation details
-
The following are applied as inline styles on the
elem
passed totinyModal
:display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; will-change: transform;
-
Showing the modal involves:
- Setting
display: block
onelem
- Setting
overflow: hidden
on thebody
element
- Setting
Installation
Install via npm:
$ npm i --save tiny-modal
Install via bower:
$ bower i --save yuanqing/tiny-modal