FULL SCREEN RESPONSIVE POPUPS EXAMPLES
Click on below buttons for live demo of popups with pure Html, Css and JavaScript
Hi there!
I'm a popup..
I come from BOTTOM
Hi there!
I'm a popup
I come from top
Hi there!
I'm a popup
I come from LEFT
Hi there!
I'm a popup
I come from RIGHT
Scroll down for code
- STYLE 1 -Popup comes from BOTTOM
- STYLE 2 -Popup comes from TOP
- STYLE 3 -Popup comes from LEFT
- STYLE 3 -Popup comes from RIGHT
<!DOCTYPE html>
<html>
<head>
<title>POP UP STYLES </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
body {
margin: 0 auto;
text-align: center;
}
/*
style 1
*/
div#popup1 {
overflow-x: hidden;
width: 100%;
margin: 0 auto 0 auto;
transition: all 0.5s ease-in-out;
z-index: 2;
position: fixed;
background: #f12711;
background: -webkit-linear-gradient(to right, #f5af19, #f12711);
background: linear-gradient(to right, #f5af19, #f12711);
color: black;
height: 0;
bottom: 0;
left: 0;
}
div#popup1.active {
height: 100%;
}
/*
style 2
*/
div#popup2 {
overflow-x: hidden;
width: 100%;
margin: 0 auto 0 auto;
transition: all 0.5s ease-in-out;
z-index: 2;
position: fixed;
background: #c31432;
background: -webkit-linear-gradient(to right, #240b36, #c31432);
background: linear-gradient(to right, #240b36, #c31432);
color: WHITE;
height: 0;
top: 0;
left: 0;
}
div#popup2.active {
height: 100%;
}
/*
style 3
*/
div#popup3 {
overflow-x: hidden;
height: 100%;
margin: 0 auto 0 auto;
transition: all 0.1s ease-in;
z-index: 2;
position: fixed;
background: #ee0979;
background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);
background: linear-gradient(to right, #ff6a00, #ee0979);
color: WHITE;
width: 0;
left: 0;
top: 0;
}
div#popup3.active {
width: 100%;
}
/*
style 4
*/
div#popup4 {
overflow-x: hidden;
height: 100%;
margin: 0 auto 0 auto;
transition: all 0.1s ease-out;
z-index: 2;
position: fixed;
background: #F00000;
background: -webkit-linear-gradient(to right, #DC281E, #F00000);
background: linear-gradient(to right, #DC281E, #F00000);
color: WHITE;
width: 0;
right: 0;
top: 0;
}
div#popup4.active {
width: 100%;
}
button {
border: none;
margin: 0.5em;
padding: 1.2em;
cursor: pointer;
outline: none;
background-color: rgb(29, 235, 29);
color: black;
box-shadow: rgba(0, 0, 0, 0.75) 0px -1px 5px -1px;
}
</style>
</head>
<body>
<div id="popup1">
<h1>Hi there!</h1>
<p>I'm a popup..</p>
<p>I come from BOTTOM</p>
<button class="close-popup1"> CLOSE POPUP - STYLE 1 </button>
</div>
<div id="popup2">
<h1>Hi there!</h1>
<p>I'm a popup</p>
<p>I come from top</p>
<button class="close-popup2"> CLOSE POPUP - STYLE 2 </button>
</div>
<div id="popup3">
<h1>Hi there!</h1>
<p>I'm a popup</p>
<p>I come from LEFT</p>
<button class="close-popup3"> CLOSE POPUP - STYLE 3 </button>
</div>
<div id="popup4">
<h1>Hi there!</h1>
<p>I'm a popup</p>
<p>I come from RIGHT</p>
<button class="close-popup4"> CLOSE POPUP - STYLE 4 </button>
</div>
<button class="open-popup1">OPEN POPUP - STYLE 1</button>
<button class="open-popup2">OPEN POPUP - STYLE 2</button>
<button class="open-popup3">OPEN POPUP - STYLE 3</button>
<button class="open-popup4">OPEN POPUP - STYLE 4</button>
<script>
// style 1
document.querySelectorAll("button.open-popup1").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup1").classList.add("active");
}
});
document.querySelectorAll("button.close-popup1").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup1").classList.remove("active");
}
});
// style 2
document.querySelectorAll("button.open-popup2").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup2").classList.add("active");
}
});
document.querySelectorAll("button.close-popup2").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup2").classList.remove("active");
}
});
// style 3
document.querySelectorAll("button.open-popup3").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup3").classList.add("active");
}
});
document.querySelectorAll("button.close-popup3").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup3").classList.remove("active");
}
});
// style 4
document.querySelectorAll("button.open-popup4").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup4").classList.add("active");
}
});
document.querySelectorAll("button.close-popup4").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup4").classList.remove("active");
}
});
</script>
</body>
</html>ALTERNATE TITLES