<a href="#modal">open</a>
<div class="modal" id="modal">
<header>
<a href="#">X</a>
</header>
this is content
</div>
.modal{
position:fixed;
top: 50%;
left: 50%;
padding: #fff;
box-shadow: 0 0 10px #333;
transform: translate(-50%, -50%);
padding: 10px;
display: none;
}
.modal:target{
display: block;
}
header{
height: 20px;
}
header a{
position: fixed;
right: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.