Modal overlay created using CSS fixed positioning.

index.html

<div class="modal">
  <div class="modal-content">
    modal content
  </div>
  <div class="modal-overlay"></div>
</div>

style.css

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
}

.modal-content {
  background: red;
  color: rgb(255, 255, 255);
  width: 25%;
  padding: 1em;
  
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-overlay {
  background-color: rgba(0,0,0,0.5);
  
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}