<!DOCTYPE html>
<html lang=
"en"
>
<head>
<!-- Required meta tags -->
<meta charset=
"utf-8"
/>
<meta
name=
"viewport"
content=
"width=device-width,
initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link rel=
"stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin=
"anonymous"
/>
<title>Automatic Pop-Up</title>
<style>
body {
height: 200vh;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 111;
}
#popup {
width: 550px;
height: 250px;
background-image: url(
https:
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 2px 2px 5px 3px white;
}
#emailId {
text-align: center;
position: absolute;
left: 25%;
top: 25%;
}
.submitId {
position: relative;
top: 130px;
left: 180px;
}
</style>
</head>
<body>
<h1 class=
"text-center text-white mt-5 font-weight-bold"
>
Automatic Pop-Up using jQuery
</h1>
<br />
<br />
<div class=
"POPmain"
style=
"display: none;"
>
<div id=
"popup"
>
<input type=
"email"
class=
"text-center w-50 form-control mt-5"
id=
"emailId"
placeholder=
"type your email here..."
/>
<button class=
"submitId btn btn-primary font-weight-bold mt-5"
>
Subscribe
</button>
<button class=
"submitId btn btn-primary text-center font-weight-bold mt-5"
>
No,Thanks
</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first,then Popper.js,then Bootstrap JS -->
<script src=
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin=
"anonymous"
></script>
<script src=
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin=
"anonymous"
></script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin=
"anonymous"
></script>
<script>
$(document).ready(
function
() {
setTimeout(
function
() {
$(
".POPmain"
).css(
"display"
,
"block"
);
}, 3000);
});
$(
".submitId"
).click(
function
() {
$(
".POPmain"
).css(
"display"
,
"none"
);
});
</script>
</body>
</html>