Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
body {
background: #8FD3FF;
}
.search-btn {
display: block;
box-sizing: border-box;
width: 570px;
max-height: 85px;
margin: 0 auto;
padding: 10px 0;
font-weight: bold;
font-size: 21px;
color: #ffffff;
text-decoration: none;
text-align: center;
background: #766357;
}
@-webkit-keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
transform: translateX(10px);
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
transform: translateX(10px);
}
}
@-webkit-keyframes show {
0% {
transform: translateX(-2000px) rotate(0deg);
}
20% {
transform: translateX(-400px) rotate(-140deg);
}
40% {
transform: translateX(10px) rotate(-355deg);
}
95% {
transform: translateX(100px) rotate(-375deg);
}
100% {
transform: translateX(0);
transform: rotate(0deg);
}
}
@keyframes show {
0% {
transform: translateX(-2000px) rotate(0deg);
}
20% {
transform: translateX(-400px) rotate(-140deg);
}
40% {
transform: translateX(10px) rotate(-355deg);
}
95% {
transform: translateX(100px) rotate(-375deg);
}
100% {
transform: translateX(0);
transform: rotate(0deg);
}
}
.form {
position: relative;
z-index: 20;
display: none;
box-sizing: border-box;
width: 570px;
max-height: 395px;
margin: 0 auto;
padding: 44px;
font-weight: bold;
background-color: #ffffff;
}
.form-show {
display: block;
-webkit-animation-name: show;
animation-name: show;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.form-error {
background-color: #ffcccc;
-webkit-animation: shake 0.6s;
animation: shake 0.6s;
}
.form-row,
.form-last-row {
position: relative;
margin: 0 auto;
margin-bottom: 27px;
padding: 0;
text-align: left;
}
.form-last-row {
margin-bottom: 55px;
}
.form-row label {
line-height: 40px;
}
.form-row input[name="date-in"],
.form-row input[name="date-out"] {
position: relative;
float: right;
box-sizing: border-box;
width: 345px;
padding: 10px;
background: #f2f2f2;
border: none;
outline: none;
}
.form-row::after {
content: "\f35a";
position: absolute;
font-weight: 900;
top: 5px;
right: 10px;
font-weight: normal;
font-size: 20px;
font-family: "Font Awesome 5 Free";
color: #a9a9a9;
outline: none;
}
.form-row input:hover,
.form-last-row input:hover {
background: #ebebeb;
}
.form-row input:focus,
.form-last-row input:focus {
padding: 8px;
background: #ffffff;
border: 2px solid #e5e5e5;
outline: none;
}
.form-col {
position: relative;
float: left;
width: 240px;
}
.form-col label {
position: absolute;
top: 7px;
left: 0;
}
.form-col-right {
float: right;
width: 220px;
text-align: right;
}
.form-col-right label {
margin-right: 27px;
}
.counter {
display: inline-block;
vertical-align: baseline;
background: #f2f2f2;
}
.form-col .counter {
margin-left: 115px;
}
.counter input {
box-sizing: border-box;
width: 45px;
padding: 10px 0;
text-align: center;
background: #f2f2f2;
border: none;
outline: none;
}
.counter-btn {
background: #f2f2f2;
border: none;
outline: none;
}
.counter-btn i {
color: #a9a9a9;
}
.form-row:hover::after,
.counter-btn i:hover {
color: #000000;
}
.form-row:active::after,
.counter-btn i:active {
color: #81b3d2;
}
.btn-submit {
width: 100%;
height: 60px;
margin: 0;
margin-top: 30px;
padding: 0;
font-weight: bold;
font-size: 21px;
line-height: 21px;
color: #ffffff;
text-transform: uppercase;
background: #81b3d2;
border: none;
outline: none;
}
.btn-submit:hover {
background: #669ec0;
}
.btn-submit:active {
color: rgba(255, 255, 255, 0.5);
background: #5496bd;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<a class="search-btn" style='cursor:pointer'>Show popup form</a>
<div class="form">
<form >
<div class="form-row clearfix">
<label for="date-in"> Arrival date:</label>
<input type="text" name="date-in" id="date-in">
</div>
<div class="form-row clearfix">
<label for="date-out">date of departure:</label>
<input type="text" name="date-out" id="date-out">
</div>
<div class="form-last-row clearfix">
<div class="form-col">
<label for="man">Adults:</label>
<div class="counter">
<button class="counter-btn"><i class="fa fa-minus"></i></button>
<input type="text" name="man" id="man">
<button class="counter-btn"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="form-col-right">
<label for="child">Children:</label>
<div class="counter">
<button class="counter-btn"><i class="icon-minus"></i></button>
<input type="text" name="child" id="child">
<button class="counter-btn"><i class="icon-plus"></i></button>
</div>
</div>
</div>
<button class="btn-submit" type="submit">Find!</button>
</form>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
var link = document.querySelector(".search-btn");
var popup = document.querySelector(".form");
var date_in = popup.querySelector("[name='date-in']");
var date_out = popup.querySelector("[name='date-out']");
var form = popup.querySelector("form");
link.addEventListener("click", function(event) {
event.preventDefault();
popup.classList.toggle("form-show");
popup.classList.remove("form-error");
date_in.focus();
});
form.addEventListener("submit", function(event) {
if (!date_in.value || !date_out.value) {
event.preventDefault();
popup.classList.remove("form-error");
popup.offsetWidth = popup.offsetWidth;
popup.classList.add("form-error");
}
});
window.addEventListener("keydown", function(event) {
if (event.keyCode === 27) {
if (popup.classList.contains("form-show")) {
popup.classList.remove("form-show");
popup.classList.remove("form-error");
}
}
});
</script>
</body>
</html>
