In this tutorial, We will learn how to create full-body animated modal using animatedModal js. We will explain full-body animated using animatedModal jquery example.


Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Jquery Full Body Animated Modal Example</title>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <style type="text/css">
        .content{text-align: center;margin:0 auto !important;}
        .btn-click{margin-top:200px;background:green;color:#fff;padding:20px;font-size:25px;border-radius:10px; border:0px;}    
        .close-animatedModal{color:#fff;position:absolute;right:80px;top:50px;border-radius:50px;padding:6px 13px;display: inline-block;border:1px solid #fff;font-size:35px;}
    </style>
    <body>
        <div class="content">
            <button id="demo01" class="btn-click" href="#animatedModal">Click Here....</button>
            <div id="animatedModal">
                <div class="close-animatedModal"> 
                    <i class="fa fa-close"></i>
                </div>
                <div class="modal-content">
                </div>
            </div>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/animatedmodal@1.0.0/demo/js/animatedModal.js"></script>
    <script type="text/javascript">
        $("#demo01").animatedModal();
    </script>
</html>


Thanks, May this example will help you...