In this post JQuery plugin full screen modal with CSS3 transitions will be showed. It is an animated modal.js which is basically a responsive JQuery plugin.

Animated Modal.js is a responsive jQuery plugin which is used to create a full screen modal with CSS3 transitions. These transitions can be used by animate.css and can be formed manually.

JQuery Plugin Full screen modal with CSS3 Transitions

Guideline: How to use.

1: Animate.css inside < HEAD > TAG

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

2: Include inside < BODY >TAG

<!--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>

3: Include following Libraries on bottom of your < /BODY > TAG

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

4: Basic Initialize

<script>// <!&#91;CDATA&#91;
$("#demo01").animatedModal();
// &#93;&#93;></script>

Source