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>

 

 

Example

 

 

html code

 

 

<div class="modal">
  <div class="modal-inner">
    <a data-modal-close>Close</a>
    <div class="modal-content"></div>
  </div>
</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;
  }
</style>

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();
modal.open('#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