<div>
  <input type="checkbox" class="modal-control" id="modal-1" name="modal-1" />
  <label for="modal-1">Open modal</label>
  <label for="modal-1" class="modal-background"></label>
  <div class="modal">
    <div class="modal-header">
      <h3>Modal Title</h3>
      <label for="modal-1" class="cursor-pointer squishy"> Close </label>
    </div>
    <div class="modal-content">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti fugit
        iste temporibus mollitia, dicta veniam qui sint omnis maxime
        exercitationem maiores impedit libero, eius officia obcaecati harum
        saepe consequuntur expedita. Lorem ipsum dolor sit amet consectetur
      </p>
    </div>
  </div>
</div>
/* Demo */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

label {
  cursor: pointer;
}

label.modal-background {
  cursor: default;
}

/* Main */
.modal {
	 position: fixed;
	 width: 90vw;
	 max-width: 450px;
	 top: 50%;
	 left: 50%;
	 background: #fff;
	 z-index: 30;
	 border-radius: 5px;
	 overflow: hidden;
	 transform: scale(0) translate(-50%, -50%);
	 transition: 0.3s;
	 transform-origin: top left;
	 opacity: 0;
	 visibility: hidden;
}
 .modal-control {
	 display: none;
}
 .modal-control:checked ~ .modal-background {
	 opacity: 1;
	 visibility: visible;
}
 .modal-control:checked ~ .modal {
	 opacity: 1;
	 visibility: visible;
	 transform: scale(1) translate(-50%, -50%);
}
 .modal-background {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100vw;
	 height: 100vh;
	 z-index: 20;
	 background: #00000080;
	 transition: 0.3s;
	 opacity: 0;
	 visibility: hidden;
}
 .modal-header {
	 padding: 13px 20px;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 border-bottom: 1px solid #d3d3d3;
}
 .modal-content {
	 padding: 13px 20px;
}
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.