Animated Popup With Animation.css In jQuery – animatedModal.js

create animation modal in animatedModal.js
File Size:106.91 KB
Views Total:429
Last Update:January 6, 2018
Publish Date:January 6, 2018
Official Website:Go to website
License:MIT

Recently we had to create animation modal with help of animatedModal.js. Let’s explore this  jQuery plugin in more detail and how to use it on your website page. 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.

How to use :

1.  you need to include the jquery libraries with animatedmodal.js :

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

2. 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>

3. 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>

4. Basic Installation in jQuery :

<script>
  $("#demo01").animatedModal();
</script>

Done