tiny-modal

v0.0.2

Published

4 years ago

No-nonsense modal windows in vanilla JavaScript. Bring your own CSS.

0High
0Medium
0Low

yuanqing

browser dialog form modal window

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 and onHide 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

Editable demo

<!DOCTYPE html>
<html>
  <head>
    <title>tiny-modal</title>
    <meta charset="utf-8">
    <style>
      .modal {background: rgba(0,0,0,.5); }
      .modal-dialog {margin: 50px auto; max-width: 500px; background: #fff; }
    </style>
  </head>
  <body>

    <button class="modal-show">Show</button>
    <div style="height: 1000px;"><!-- content --></div>

    <div class="modal">
      <div class="modal-dialog">
        <button class="modal-hide">Hide</button>
        <div style="height: 1000px;"><!-- content --></div>
      </div>
    </div>

    <script src="path/to/tiny-modal.min.js"></script>
    <script>
      var elem = document.querySelector('.modal');
      var opts = {
        showSelector: '.modal-show',
        hideSelector: '.modal-hide',
        onShow: function(target, modal) {},
        onHide: function(target, modal) {},
        scrollTop: true
      };
      tinyModal(elem, opts);
    </script>

  </body>
</html>

In the browser, the tinyModal function is a global variable. In Node, do:

var tinyModal = require('tiny-modal');

var modal = tinyModal(elem [, opts])

elem — Our modal DOM element:
- The elem passed to tinyModal 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
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 shown | true
Note that the signature of both the onShow and onHide callbacks is (triggerElem, elem), where triggerElem 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 to tinyModal:

display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
will-change: transform;

Showing the modal involves:
1. Setting display: block on elem
2. Setting overflow: hidden on the body element

Installation

Install via npm:

$ npm i --save tiny-modal

Install via bower:

$ bower i --save yuanqing/tiny-modal

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme