VanillaModal Markup & Stylesheet

modal-content.html

<div id="modal-1" style="display:none;">Modal 1 content</div>
<div id="modal-2" style="display:none;">Modal 2 content</div>

modal.html

<div class="modal">
  <div class="modal-inner">
    <a rel="modal:close">Close</a>
    <div class="modal-content"></div>
  </div>
</div>

modal.scss

// Prevents the modal from flashing on-screen.
.modal {
  display: none;
}

// The following directives only apply once the script has loaded.
body.vanilla-modal {
  
  .modal {
    display: block;
    position: fixed;
    content: "";
    top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    background: rgba(#000, 0.6);
    z-index: -1;
    opacity: 0;
    font-size: 0;
	// Note the delay on the z-index.
    // Read above if you're wondering
    // why this is here.
    transition: opacity 0.2s, z-index 0s 0.2s;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    
    // This little bit of code centers the
    // modal's inner container vertically.
    > * {
      display: inline-block;
      white-space: normal;
      vertical-align: middle;
      text-align: left;
    }
    
    &:before {
      display: inline-block;
      overflow: hidden;
      width: 0;
      height: 100%;
      vertical-align: middle;
      content: "";
    }
  }
 
  &.modal-visible {
    .modal {
      z-index: 99;
      opacity: 1;
      // Note that we've removed any transiton on the
	  // z-index when the modal is in its visible state.
      transition: opacity 0.2s;
    }
  }

}

.modal-inner {
  position: relative;
  overflow: hidden;
  width: 90%;
  max-height: 90%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  z-index: -1;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s;
  margin: 20px 0;
  
  .modal-visible & {
    z-index: 100;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s, transform 0.2s;
  }
}