Modal without JavaScript

A modal is a dialog box or popup window that is displayed on top of the current page, this modal only used HTML & CSS only without JavaScript.

DEMO

Pop Me!

Modal Title

×

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML

<div id="wrapper">
  <p><a class="button" href="#popup">Pop Me!</a></p>
</div>

<div id="popup" class="overlayModal">
  <a class="cancel" href="#"></a>
	<div class="popup">
		<h2>Modal Title</h2>
		<a class="close" href="#">&times;</a>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
	</div>
</div>

CSS

#wrapper {
  background-clip: padding-box;
  text-align: center;
}

#wrapper .button {
  padding: 5px 10px;
  background-color: Crimson;
  border-radius: 4px;
  color: white;
  text-decoration: none;
}
#wrapper .button:hover {
  background-color: Coral;
}

.overlayModal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 200ms;
  visibility: hidden;
  opacity: 0;
}
.overlayModal .cancel {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default;
}
.overlayModal:target {
  visibility: visible;
  opacity: 1;
}

.overlayModal .popup {
  margin: 75px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #666;
  width: 300px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  position: relative;
}
.overlayModal .popup h2 {
  margin-top: 0;
}
.overlayModal .popup .close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 20px;
  right: 20px;
  opacity: 0.8;
  transition: all 200ms;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #666;
}
.overlayModal .popup .close:hover {
  opacity: 1;
}
.overlayModal .popup .content {
  max-height: 400px;
  overflow: auto;
}
.overlayModal .popup p {
  margin: 0 0 1em;
}
.overlayModal .popup p:last-child {
  margin: 0;
}