<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.