<a href="#modal" class="open-modal">Open Modal</a>
<div id="modal" class="modal">
  <div class="modal-content">
    <a href="#" class="close">&times;</a>
    <p>This is a CSS-only modal.</p>
  </div>
</div>
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

.modal:target {
  display: flex; /* Shows modal when it's targeted */
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.close {
  position: absolute;
  top: 10px; right: 10px;
  text-decoration: none;
  color: black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.