Jquery Full Body Animated Modal Example

Admin   HTML5 - CSS   183  2021-03-13 00:30:08

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...