Share on facebook
Share on reddit
Share on twitter
Share on pinterest
Share on tumblr
Share on whatsapp
How-to_create_modal_css-min-768x470.png

How to create a modal with CSS

Share on facebook
Share on twitter
Share on linkedin
Share on tumblr
Share on whatsapp
Share on pinterest

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;
}

.modal-title {
  font-size: 22px;
  color: #4b4b4b;
  font-weight: 600;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  line-height: 23px;
  color: #2a2a2a;
  margin-bottom: 10px;
}

.modal-btn {
  margin-top: 10px;
  background: #2962FF00;
  padding: 8px 14px;
  display: inline-block;
  color: #2962FF;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 3px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #2962FF;
  user-select: none;
}

.modal-btn:hover {
  background: #2962FF4D;
}

.modal-btn:focus {
  background: #2962FF;
  color: white;
}

Preview

That’s all for now 😀 if you have any problems please comment below. And if you need to request a tutorial fill out this form. Happy coding !

Subscribe on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *

Request a tutorial if you didn't find what you need.