Recently we had to create animation modal (popup) with help of animatedModal.js. The animatedModal.js is basically used to open modal with different-different animation effects. you can also choose from animation.css then add animation name in jquery. The plugin produces a responsive full screen modal with transitions. it is fully customizeable with easy to maintain. Let’s explore this jQuery plugin in more detail and how to use it on your website page.
Table of Contents
How to use :
you need to include the jquery libraries with animatedmodal.js :
<script src="jquery.min.js"></script>
<script src="/js/animatedModal.min.js"></script>
You can add animation.css link :
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"><p></p>
In the body tag, you need to add a snippet of code which looks like this :
<!--Call your modal-->
<a id="demo01" href="#animatedModal">DEMO01</a>
<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" -->
<div class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
Basic Installation in jQuery :
<script>
$("#demo01").animatedModal();
</script>
Done
Thanks for make jQuery plugin is developed by joaopereirawd For more Helpfull for users, please check the demo page or visit the official website.
