27 August 2018

Unlabelled

Pop Up Form in Html

August 27, 2018 0 Comments


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<style type="text/css">
.background{ width:100%; height:100%; position:fixed; left:0px; top:0px; display:none;}
.background:before{width:100%; height:100%; background-color:rgba(0,0,0,.5); position:absolute; top:0px; left:0px; content:'';}
.forground{background-color: #fffd4b; border: 2px solid #8f8e03; border-radius: 7px; height: 450px; left: 50%; padding: 10px; position: absolute; top: 50%; width: 830px; z-index: 100; transform: translate(-50%, -50%);
-webkit-transform:translate(-50%,-50%);}
.forground img{ width:100%; height:100%; display:block;}
 .crss{background-color: #3a3a3a; border-radius: 50%; color: #ffffff; font-size: 25px; height: 40px; padding-left: 10px; padding-top: 5px; position: absolute; right: -17px; top: -7px; width: 40px; cursor:pointer;}
.callback_btn{color:red;}
</style>
</head>

<body>
<div class="background">
<div class="forground"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-OivoSqN3Y2xNT6tRuAVBmdpOTgOVg858hR2f1ZnUc8VLg5i4f526A6tOUNFTgmn22EJWOPKktJAm3sLA8CbOi2k7Gbx6uupYb8w0U7a0GlnrHtOXtojbOAG2_pDsi5uorQw4xs7USLgU/s1600/IMG_20131002_183944.jpg"/>
<div class="crss"><i class="fa fa-times" aria-hidden="true"></i></div>
</div>
</div>

<div class="callback_btn">Pop Up !</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.callback_btn').click(function(){
 $('.background').fadeIn(1000);
 });
 $('.crss').click(function(){
 $('.background').stop().fadeOut(1000)
  });
});
</script>
</body>
</html>
at