Minimal CSS3 Animated Modal Window

Preview:

Description:

A simple, lightweight JavaScript library used to display multiple modal windows with CSS3 animations on the webpage.

How to use it:

Include both modal.css and modal.min.js on the webpage.

<link href="assets/css/modal.css" rel="stylesheet">
<script src="assets/js/modal.min.js"></script>

Create the modal window.

<div class="modal" id="demo">
  <div class="modal-title">
    Modal Title
  </div>
  <div class="modal-body">
    Modal Content
  </div>
</div>

Trigger the modal window.

<button onclick='modal.show("demo")'>Show first</button>

Hide the modal window manually.

<button onclick='modal.hide()'>Hide</button>

All default configs.

isInited: false,
// CSS rules
modalBox: '.modal-box', // Container for all modal stuff
modalsClass: '.modal', // Class assigned to each modal window box
modalsCont: '.modal-wrapper', // Place, where modals will be put after collecting
// Animation classes
show: { // Showing classes
  stat: 'opened', // static
  dyn: 'show', // dynamic
  swch: 'switch', // switch to
},
hide: { // Hiding classes
  stat: 'closed', // static
  dyn: 'hide' // dynamic
},
// Class added when modals has been collected
loadCls: 'loaded',
// Key code. Null to disable
hideByKey: 27,
// URL hash prefix for modal anchor. Null to disable
// Example: 
// urlPrefix: 'M_'
// site.com/page.html#M_someModal will open modal with id "someModal" after init of the script.
urlPrefix: ''

Changelog:

v1.5 (08/14/2018)

• Update