Skip to content

All topics  /  jQuery

Jquery Full Body Animated Modal Example

jQuery ·

Hi Guys,

In this blog, I will show how to create full body animated using animatedModal js. We will exaplain full body animated using animatedModal jqury example. you can easyliy to full body animated modal using jqury.we will make full body animated modal using animatedModal js.

here the example of full body animated using jqury

Example


Now In this example create simple html full body animated using jqury using animatedModal js. 

<!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/[email protected]/demo/js/animatedModal.js"></script>
<script type="text/javascript">
    $("#demo01").animatedModal();
</script>
</html>

It will help you...

More on this topic