CSS Modal Dialog

<a class="modal-open-btn" href="#confirm">Open with backdrop close</a>

<div class="modal-overlay modal-anim" id="confirm">
  <a href="#closed" class="modal-backdrop" aria-label="Close the dialog"></a>
  <div class="modal-box">
    <h3>Click anywhere outside</h3>
    <a class="modal-close" href="#closed">Close modal</a>
  </div>
</div>

/* covers the whole overlay, sits under the box */
.modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* without this the backdrop link would intercept clicks on the buttons */
.modal-anim .modal-box {
  position: relative;
  z-index: 1;
}

/* an animation, not a transition: display jumps in one step */
.modal-anim:target {
  animation: modal-fade .2s ease-out;
}

.modal-anim:target .modal-box {
  animation: modal-pop .25s ease-out;
}

@keyframes modal-fade {
  from { opacity: 0; }
}

@keyframes modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .modal-anim:target,
  .modal-anim:target .modal-box { animation: none; }
}

<input type="checkbox" id="dlg" class="modal-check">
<label for="dlg" class="modal-open-btn">Open without touching the URL</label>

<div class="modal-check-overlay">
  <label for="dlg" class="modal-backdrop" aria-label="Close the dialog"></label>
  <div class="modal-box">
    <h3>No hash, no history</h3>
    <label for="dlg" class="modal-close">Close modal</label>
  </div>
</div>

/* clipped rather than display:none, so the trigger stays keyboard
   reachable. clip-path clips hit testing too, which stops the one pixel
   box landing on top of its own label and swallowing the click. */
.modal-check {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.modal-check-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  z-index: 200;
}

.modal-check:checked ~ .modal-check-overlay {
  display: flex;
}

.modal-check:focus-visible + .modal-open-btn {
  outline: 2px solid #b8ff57;
  outline-offset: 2px;
}