<div class="container">
  <a href="#modal">Open Modal</a>
</div>

<div id="modal" class="modal">
  <div class="modal-content">
    <h1>My Modal</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>
  <a href="#" class="close-modal">&times;</a>
  </div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: linear-gradient(to right top, #f61414, #ff003f, #ff0064, #fa0087, #eb12a8);
}

a {
  color: #666;
  background-color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 5px;
  text-decoration: none;
  text-transform: uppercase;
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal-content {
  position: relative;
  width: 500px;
  padding: 1rem;
  background: #fff;
  border-radius: 5px;
}

.close-modal {
  position: absolute;
  top: 5px;
  right: 5px;
}