<div class="parent ">
  <input type="checkbox" id="showmodal" name="showmodal"><label for="showmodal" class="button" role="button" tabindex="0"><span>Show Modal</label>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis accusantium dignissimos ratione velit rem pariatur facilis deserunt ea distinctio, corporis voluptatum ipsam, eaque id quibusdam. Sed vel nesciunt cumque provident.</p>

  <div class="modal">

    This is a modal
    <label class="close" for="showmodal">❌</label>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, laudantium nihil? Odio autem et beatae soluta.</p>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis accusantium dignissimos ratione velit rem pariatur facilis deserunt ea distinctio, corporis voluptatum ipsam, eaque id quibusdam. Sed vel nesciunt cumque provident.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis accusantium dignissimos ratione velit rem pariatur facilis deserunt ea distinctio, corporis voluptatum ipsam, eaque id quibusdam. Sed vel nesciunt cumque provident.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis accusantium dignissimos ratione velit rem pariatur facilis deserunt ea distinctio, corporis voluptatum ipsam, eaque id quibusdam. Sed vel nesciunt cumque provident.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis accusantium dignissimos ratione velit rem pariatur facilis deserunt ea distinctio, corporis voluptatum ipsam, eaque id quibusdam. Sed vel nesciunt cumque provident.</p>
</div>
.parent {
  padding: 4rem;
  background-color: #fdfdfd;
  box-sizing: border-box;
  border: 1.5rem solid transparent;
}

#showmodal {
  opacity: 0;
  width: 1px;
  height: 1px;
  left: -20px;
  position: absolute;
}

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 200px;
  height: 200px;
  padding: 2rem;
  background-color: #fff;
  border-radius: 4px;
}

#showmodal:checked ~ .modal {
  display: inline-block;
}

// overlay
.parent:has(#showmodal:checked ~ .modal):before {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

label {
  margin-right: 1rem;
  font-weight: bold;
  &.button {
    outline: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem 0.3rem;
  }

  &:hover,
  &:focus-within {
    background-color: #fdfdf;
    outline: 1px solid #444;
  }

  &.close {
    display: inline-block;
    position: absolute;
    top: 8px;
    right: 0;
    cursor: pointer;
  }
}
View Compiled
Run Pen

External CSS

  1. https://codepen.io/chrisbautista/pen/ZEryzKx.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.