Today we learn how to open a full screen popup with animation effects :
HTML Code :
<!Doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMOS</title>
<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<ul>
<li><a id="demo01" href="#animatedModal">DEMO01</a></li>
</ul>
<div id="animatedModal">
//to close the modal, the class name has to match the name given on the ID
<div id="btn-close-modal" class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
hello Evon !
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/animatedModal.min.js"></script>
<script>
$("#demo01").animatedModal();
</script>
</body>
</html>
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.
0 Comment(s)