Today, In this tutorial I will tell you how to create a modal with pure CSS !
Markup
Here’s the HTML markup for the code.
<a href="#modal" class="modal-btn">Open modal</a>
<div class="modal-overlay" id="modal">
<div class="modal">
<h3 class="modal-title">Modal title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Temporibus tempore aperiam deleniti consequatur, earum, consectetur et, possimus dolor laborum quia sint facere asperiores quidem repellat illum obcaecati, saepe a beatae?</p>
<a href="#" class="modal-btn">Got It</a>
</div>
</div>
The CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
font-family: "Segoe ui", sans-serif;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
height: 100%;
width: 100%;
background: #0000004a;
}
.modal-overlay:target {
opacity: 1;
pointer-events: all;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
max-width: 600px;
width: 80%;
transform: translate(-50%, -50%) scale(.8);
background: white;
padding: 20px 30px;
font-family: "segoe ui", sans-serif;
border-radius: 4px;
transition: all 2s ease;
box-shadow: 0px 8px 40px -20px black;
}
.modal-overlay:target .modal {
transform: translate(-50%, -50%) scale(1);
transition: all 0.2s ease;
}
Keep on Reading on Tronic247.
Top comments (0)