Today we learn how to open a full screen popup with animation effects :
HTML Code :
<html class="no-js" lang="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="css/animate.min.css">
<li><a id="demo01" href="#animatedModal">DEMO01</a></li>
//to close the modal, the class name has to match the name given on the ID
<div id="btn-close-modal" class="close-animatedModal">
<!--Your modal content goes here-->
hello Evon !
In above code i have included animation.min.css file in head tag which is responsible for cascading style sheet in your html page.
Note : To close the modal, anchor tag class name should be match with the given id.
At the bottom of page i have included animationModal.min.js file which is responsible for various animation effects.
You can give various animation effects to your html page with the help of different classes which is pre-defined in animationModal.min.js file.
And at the bottom of page i have written 'animateModal()' method which is defined in animateModal.min.js file for animation.