11-Apr-2023
.
Admin
.gif)
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/animatedmodal@1.0.0/demo/js/animatedModal.js"></script>
<script type="text/javascript">
$("#demo01").animatedModal();
</script>
</html>
It will help you...
#Jquery
#Html
#Css
