Animated Modal Window with JavaScript and CSS3 Transitions – Overlay.js

Overlay.js is an easy-to-use JavaScript library for creating responsive, animated modal windows with a fullscreen overlay. It uses CSS3 transitions for smooth sliding animations.

How to use it:

Load the overlay.css for required modal CSS styles.

<link href="css/overlay.css" rel="stylesheet">

Create a container that serves as a place for your overlays to live when they are not open.

<div id="overlays">
  <!-- Each overlay needs an id -->
  <div id="myOverlay1">
    <h1>TEST CONTENT 1</h1>
  </div>
  <div id="myOverlay2">
    <h1>TEST CONTENT 2</h1>
  </div>
  <div id="myOverlay3">
    <h1>TEST CONTENT 3</h1>
  </div>
</div>

Create a trigger link to toggle the modal window.

<a id="overlayTrigger" href="#">Open</a>

Display the modal window as you click on the toggle link.

OOP.addEventListener(trigger, "click", function(evt){
  Overlay.show("myOverlay1", {
    containerClass:"slide-up" // slide-up, slide-down, slide-right, slide-left
  });
  return false;
});

Changelog:

v2.0.2 (04/18/2020)

• Updated