Fullscreen Modal Window with jQuery and Animat.css - animatedModal.js

animatedModal.js is a responsive, fullscreen modal window plugin that uses animate.css to create cool CSS3 based entrance/exit animations.

How to use it:

1. Load the required animate.css in the head section of the web page.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

2. Load the animateModal.js script after your jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/animatedModal.min.js"></script>

3. Create the modal content with a close link. The close link's class name has to match the name given on the ID as follow.

<div id="animatedModal">

  <div  id="btn-close-modal" class="close-animatedModal"> 
    CLOSE MODAL
  </div>
      
  <div class="modal-content">
    <!--Your modal content goes here-->
  </div>
  
/div>

4. Create a link to toggle the modal window.

<a id="demo" href="#animatedModal">DEMO</a>

5. Initialize the plugin with default options.

$("#demo").animatedModal();

6. Plugin options and defaults.

// Costumize your target
modalTarget:'animatedModal', 

// Modal options
position:'fixed', 
width:'100%', 
height:'100%', 
top:'0px', 
left:'0px', 
zIndexIn: '9999',  
zIndexOut: '-9999',  
color: '#39BEB9', 
opacityIn:'1',  
opacityOut:'0', 

// Transition when the modal goes in
animatedIn:'zoomIn',

// Transition when the modal goes out
animatedOut:'zoomOut',

// Animation duration
animationDuration:'.6s', 

// This makes your modal scrollable or not
overflow:'auto', 

// Callbacks
beforeOpen: function() {},           
afterOpen: function() {}, 
beforeClose: function() {}, 
afterClose: function() {}

About Author:

Author: João Pereira

Website: http://joaopereirawd.github.io/animatedModal.js/

Changelog:

2018-12-19

• Update

2015-08-06

• Cross Browser Fix

---

This awesome jQuery plugin is developed by joaopereirawd. For more Advanced Usages, please check the demo page or visit the official website.