================
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="col-xs-6 col-sm-6">
<div class="enq-btn">
<div class="form-box">
<form action="#">
<div class="form-group">
<a class="close_btn">
<i class="fa fa-times"></i>
</a>
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<a href="#" class="enq-left">Enquiry Now</a>
<a href="tel:+91 9911483144" class="call-btns">Call Now</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
==================
JQuery
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function () {
// Do something after 1 second
$(".form-box").addClass('form_active');
}, 3000);
$(".enq-left").click(function() {
$(".form-box").addClass('form_active');
});
$(".close_btn").on('click', function() {
$(".form-box").removeClass('form_active');
});
});
</script>
=====================
Css
body{
margin: 0px;
padding: 0px;
}
.enq-btn{
display: none;
}
@media handheld, only screen and (min-width: 300px) and (max-width: 320px) {
.enq-btn{
display: block;
}
.enq-btn{
z-index: 989;
position: fixed;
left: 0;
top: auto;
right: auto;
bottom: -320px;
background-color: #002E5E;
width: 100%;
padding: 40px 20px 10px;
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}
.enq-left{
display: block;
position: fixed;
bottom: 0;
left: 0;
text-align: center;
width: 50%;
line-height: 40px;
background-color: #FE5100;
color: #fff;
z-index: 990;
font-size: 18px;
text-transform: uppercase;
}
.call-btns{
display: block;
position: fixed;
bottom: 0;
right: 0;
text-align: center;
width: 50%;
line-height: 40px;
background-color: #FE5100;
color: #fff;
z-index: 990;
font-size: 17px;
font-family: 'robotobold';
text-transform: uppercase;
border-left: 1px solid #fff;
}
.form-box{
z-index: 989;
position: fixed;
left: 0;
top: auto;
right: auto;
bottom: -380px;
background-color: #002E5E;
width: 100%;
padding: 40px 20px 10px;
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
margin: 170px 40px 0 0;
}
.close_btn {
position: absolute;
top: 0;
left: 0;
font-size: 20px;
z-index: 1000;
background-color: red;
color: #fff;
width: 34px;
height: 34px;
line-height: 32px;
text-align: center;
display: block;
}
.form-box.form_active {
bottom: 40px;
}
label{
color: #fff;
}
}
@media handheld, only screen and (min-width: 320px) and (max-width: 400px) {
.enq-btn{
display: block;
}
.enq-btn{
z-index: 989;
position: fixed;
left: 0;
top: auto;
right: auto;
bottom: -320px;
background-color: #002E5E;
width: 100%;
padding: 40px 20px 10px;
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}
.enq-left{
display: block;
position: fixed;
bottom: 0;
left: 0;
text-align: center;
width: 50%;
line-height: 40px;
background-color: #FE5100;
color: #fff;
z-index: 990;
font-size: 18px;
text-transform: uppercase;
}
.call-btns{
display: block;
position: fixed;
bottom: 0;
right: 0;
text-align: center;
width: 50%;
line-height: 40px;
background-color: #FE5100;
color: #fff;
z-index: 990;
font-size: 17px;
font-family: 'robotobold';
text-transform: uppercase;
border-left: 1px solid #fff;
}
.form-box{
z-index: 989;
position: fixed;
left: 0;
top: auto;
right: auto;
bottom: -380px;
background-color: #002E5E;
width: 100%;
padding: 40px 20px 10px;
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
margin: 170px 40px 0 0;
}
.close_btn {
position: absolute;
top: 0;
left: 0;
font-size: 20px;
z-index: 1000;
background-color: red;
color: #fff;
width: 34px;
height: 34px;
line-height: 32px;
text-align: center;
display: block;
}
.form-box.form_active {
bottom: 40px;
}
label{
color: #fff;
}
}
Comments
Post a Comment