HOW TO MAKE RESPONSIVE POP UPS WITH PURE HTML, CSS AND JAVASCRIPT
HTML
Add open-contact and close-contact class to buttons to attach open and close popup events.(We will do it using JavaScript)
<button class="open-popup">OPEN POPUP</button>
<div id="popup">
<h1>Hi there!</h1>
<p>I'm a popup</p>
<button class="close-popup"> CLOSE POPUP </button>
</div> CSS
Initially height of popup is set to 0, so that it is not visible on page, later we will add active class to it using JavaScript.
So, the popup comes into picture with some cool transition
body {
margin: 0 auto;
text-align: center;
}
div#popup {
overflow-x: hidden;
width: 100%;
margin: 0 auto 0 auto;
transition: all 0.2s ease-in-out;
z-index: 2;
position: fixed;
background-color: deepskyblue;
color: black;
height: 0;
bottom: 0;
}
div#popup.active {
height: 100%;
}
button {
border: none;
margin: 2em;
padding: 1em;
cursor: pointer;
outline: none;
}
button.open-popup {
background-color: blueviolet;
color: white;
}
button.close-popup {
background-color: red;
color: white;
}JAVASCRIPT
document.querySelectorAll("button.open-popup").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup").classList.add("active");
}
});
document.querySelectorAll("button.close-popup").forEach((ele) => {
ele.onclick = function() {
document.getElementById("popup").classList.remove("active");
}
});That's it...Now you have a cool popup on your site.Scroll down for live demo
ALTERNATE TITLES