Vanilla-Modal CSS-driven JavaScript Modal/Popup Window Library Full Examples With Source Code



A tiny, flexible, completely dependency-free CSS-powered JavaScript modal.



Usage and Examples


1. Install the script.


  • Using NPM:
    npm install vanilla-modal --save
  • Using Bower:
    bower install vanilla-modal --save

2. Include the script in your project.

  • The script is compiled using UMD module declarations. Use it with Webpack, Browserify, RequireJS or by simply including a <script> tag.
  • ES 2015
    import VanillaModal from 'vanilla-modal';
  • CommonJS:
     const VanillaModal = require('vanilla-modal');
  • AMD
     require(['/node_modules/vanilla-modal/dist/index.js'], function(VanillaModal) {
     const vanillaModal = new VanillaModal();
  • Browser
     <script src="/node_modules/vanilla-modal/dist/index.js"></script>
    <script>var vanillaModal = new VanillaModal.default()</script>






html code



<div class="modal">
  <div class="modal-inner">
    <a data-modal-close>Close</a>
    <div class="modal-content"></div>



<div id="modal-1" class="modal-hider">Modal 1 content</div>
<div id="modal-2" class="modal-hider">Modal 2 content</div>



<style type="text/css">
  body.vanilla-modal .modal-hider {
    position: absolute;
    left: -99999em;

4. Create a VanillaModal instance.


const modal = new VanillaModal(options);


See also  Build a Animated Material Gradient Button with Hover Effect in Browser Using HTML5 and CSS3 Full Project For Beginners


Examples follow:

The following element will open #modal-1 using VanillaModal.

<a href="#modal-1" data-modal-open>Modal 1</a>

The element below will close the modal.

<a data-modal-close>Close</a>

These defaults can easily be changed at instantiation:

const modal = new VanillaModal({
  open: '.my-open-class',
  close: '.my-close-class'



7. Programmatically opening a modal


If you need to open the modal automatically, you can do so by passing a DOM ID string to the open() function.

For example:

const modal = new VanillaModal();'#foo');



Default Options:


  modal: '.modal',
  modalInner: '.modal-inner',
  modalContent: '.modal-content',
  open: '[data-modal-open]',
  close: '[data-modal-close]',
  page: 'body',
  loadClass: 'vanilla-modal',
  class: 'modal-visible',
  clickOutside: false,
  closeKeys: [27],
  transitions: true,
  onBeforeOpen: null,
  onBeforeClose: null,
  onOpen: null,
  onClose: null

Leave a Reply