Animated Popup With jQuery – animatedModal.js

LightBox
Demo    Download
Animated Popup With jQuery – animatedModal.js
File Size: 106.99 KB
Views Total: 1064 views
Last Update:February 23, 2021
Publish Date: February 27, 2015
Official Website: Go to website
License: MIT
Plugin Author: joaopereirawd

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 :

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

<script src="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>

List Of Version :
  • 1.0.0
  • 1.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.