In this video, we’re gonna create a simple modal popup using HTML and CSS. we create a popup Modal that appears when a button is clicked. So stay tuned and let’s have some fun!
Modal PopUp with HTML and CSS
HTML Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>How To Create a Modal PopUp Pure Css | Navid Dev</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="#popup" class="button">Open Popup</a>
<div class="popup" id="popup">
<div class="popup_inner">
<div class="img">
<img
src="https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=362&q=80"
alt=""
/>
</div>
<div class="content">
<h2>what a cute and lovely dog!</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Exercitationem, explicabo quisquam ut dolorem asperiores quidem nisi
libero ullam facilis deleniti natus distinctio? Reprehenderit qui
quibusdam, quas molestiae vel ipsa veritatis.
</p>
<a href="" class="button">Call To Action</a>
</div>
<a href="#" class="close_popup">X</a>
</div>
</div>
</body>
</html>CSS Codes
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600,900&subset=latin-ext');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
body {
font-family: 'Raleway', sans-serif;
background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
url('https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80')
no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.button {
background-color: rgb(247, 73, 21);
color: #fff;
padding: 1rem 2rem;
border-radius: 0.25rem;
text-align: center;
}
.popup {
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0;
visibility: hidden;
bottom: 0;
right: 0;
transition: 0.65s ease-in-out;
}
.popup_inner {
display: flex;
align-items: center;
position: relative;
width: 900px;
height: 600px;
background-color: #fff;
border-radius: 1rem;
overflow: hidden;
bottom: -100vw;
right: -100vh;
transform: rotate(90deg);
transition: 0.65s ease-in-out;
}
.popup_inner h2 {
text-transform: uppercase;
font-size: 1.6rem;
}
.popup_inner p {
color: rgb(47, 51, 51);
line-height: 1.5rem;
text-align: justify;
}
.popup_inner .img {
height: 100%;
width: 45%;
}
.popup_inner .img img {
height: 100%;
object-fit: cover;
}
.popup_inner .content {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 55%;
height: 65%;
padding: 2.5rem;
}
.popup_inner .close_popup {
position: absolute;
display: flex;
width: 3.5rem;
height: 3.5rem;
background-color: black;
color: #fff;
line-height: 3.5rem;
top: -20.4rem;
right: -20.4rem;
align-items: center;
justify-content: center;
border-radius: 50%;
transform: rotate(90deg);
transition: 0.8s ease-in-out;
transition-delay: 1s;
}
.popup:target {
opacity: 1;
visibility: visible;
}
.popup:target .popup_inner {
bottom: 0;
right: 0;
transform: rotate(0);
}
.popup:target .popup_inner .close_popup {
top: -0.4rem;
right: -0.4rem;
transform: rotate(0);
}
.popup_inner .button {
transform: translateX(120%);
transition: 0.3s ease-in-out;
transition-delay: 0.6s;
z-index: 0;
}
.popup:target .popup_inner .button {
transform: translateX(0);
}