Minimal CSS3 Animated Modal Window

Category: Javascript , Modal & Popup | August 14, 2018
Views Total:101 views
Official Page:Go to website
Last Update:August 14, 2018


Minimal CSS3 Animated Modal Window


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 class="modal-body">
    Modal Content

Trigger the modal window.

<button onclick='"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_'
// will open modal with id "someModal" after init of the script.
urlPrefix: ''


v1.5 (08/14/2018)

  • Update

You Might Be Interested In:

One thought on “Minimal CSS3 Animated Modal Window

  1. Fossa

    Cool windows! Great thanks. There is a small problem: the indent in case of hidden sсroll-bar works only in Firefox (padding-right:20px for body). In Chrome and Opera (padding-right:0px). All browsers of the latests version.


Leave a Reply