Building Popup / Modal using CSS Only

Popup boxes / Modal are useful way of showing an important information to the website visitors. In this post we will see how to create an animated popup box with close button using HTML and CSS only. Here we have used special CSS selectors ":target" to create toggle behaviour.

HTML

<div class="center">
  <a href="#popup">Open Popup</a>
</div>
<div id="popup">
  <div class="popup-content">
    <h1>This is title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatem dignissimos quis expedita earum explicabo nam perspiciatis. Aliquam, laudantium doloremque.</p>
    <a href="#" class="close-popup">&times;</a>
  </div>
</div>

CSS

body {
  margin:0px;
  height:100vh;
  font-family:"Open Sans",sans-serif;
  background:linear-gradient(to right, #00acee, #205172);
}
.center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.center a {
  padding:10px 20px;
  background:#eee;
  color:#111;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  border-radius:5px;
}
#popup {
  position:fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.75);
  display:none;
}
#popup .popup-content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:400px;
  padding:10px 20px;
  background:#eee;
}
#popup a.close-popup {
  position:absolute;
  top:20px;
  right:20px;
  font-size:20px;
  font-weight:600;
  text-decoration:none;
}
#popup:target {
  display:block;
}