Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • popup in jquery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 44
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: