HTML
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
<a class="btn" href="#modal">Open Modal</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
<div id="modal" class="backdrop">
<div class="modal">
<a class="close" href="#">×</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
CSS
.container {
text-align: center;
}
.container p {
text-align: left;
}
.btn {
font-size: 1em;
padding: 10px;
border: 2px solid #c53532;
border-radius: 4px;
transition: color,background-color 0.25s ease-out 0s;
}
.btn:hover {
border: 2px solid #666666;
background-color: #c53532;
color: #FFFFFF;
}
.backdrop {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 100;
transition: opacity 0.35s ease-out 0s;
visibility: hidden;
opacity: 0;
}
.backdrop:target {
opacity: 1;
visibility: visible;
}
.backdrop .modal {
position: relative;
width: 400px;
height: 180px;
background-color: #FFFFFF;
max-width: 90%;
max-height: 80%;
border-radius: 4px;
border: 2px solid #000000;
padding: 1em;
overflow: hidden;
}
.backdrop .modal .close{
position: absolute;
display: inline-block;
width: 22px;
height: 24px;
border-radius: 50%;
right: 10px;
top: 10px;
text-align: center;
transition: background-color 0.25s ease-out 0s;
font-size: 1.5em;
line-height: 1;
}
.backdrop .modal .close:hover {
background-color: #c3c3c3;
}