Making Popups Without JavaScript is Simple!

This is about making CSS-only (not javascript) popups to make asides appear on a user's click.

HTML

<span>
    <input type="checkbox" id="popup1" class="smoosh" />
    <label for="popup1" class="overlay"></label>
    <div class="overlay-dialogue">
      <h2>Whatever you Need to Write</h2>
      <p>Content goes here</p>
      <label for="popup1">Close</label>
    </div>
  </span>
  

  
  <label for="popup2">Click here to invoke the second popup</label>
  <span>
    <input type="checkbox" id="popup2" class="smoosh" />
    <label for="popup2" class="overlay"></label>
    
  </span>

CSS

label.overlay {
      position: fixed;
      display: none;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
    }
    
    input[type=checkbox].smoosh:checked ~ label.overlay {
      display: block;
      z-index: 500;
    }
    
    div.overlay-dialogue {
      position: fixed;
      display: none;
      width: 100%;
      left: 0;
      right: 0;
      top: 15%;
      bottom: 15%;
      background: whitesmoke;
    }
    
    input[type=checkbox].smoosh:checked ~ div.overlay-dialogue {
      display: block;
      z-index: 505;
    }
		.smoosh { display: none; }
		div.overlay-dialogue {
      padding: 20pt 5% 20pt 5%;
      overflow-y: auto;
      animation: START .5s ease-in-out;
    }
    
    @keyframes START {
      0% {
        transform: rotateY(100deg);
        opacity: 0;
      }
      100% {
        transform: rotateY(0deg);
        opacity: 1;
      }
    }
    
    label.overlay {
      background-color: rgba(0, 0, 0, .5);
      text-align: center;
      color: rgba(200, 200, 200, 0.5);
      line-height: 120%;
    }
    
    label.overlay:hover,
    label.overlay:active {
      line-height: 120%;
      color: darkgrey;
    }
    
    label.overlay:active {
      line-height: 130%;
    }
    
    label.overlay:before {
      content: 'Tap here to dismiss';
    }
    
    label {
      line-height: 120%;
      color: blue;
    }
    
    label:hover {
      color: orangered;
    }
    
    label:active {
      line-height: 90%;
      color: orange;
    }