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
    • 48
    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="">
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <link rel="stylesheet" href="css/animate.min.css">
                <li><a id="demo01" href="#animatedModal">DEMO01</a></li>
            <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 class="modal-content">
                    <!--Your modal content goes here-->
                     hello Evon !
            <script src="js/jquery.min.js"></script>
            <script src="js/animatedModal.min.js"></script>

    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

Sign up using

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: