Modal Dialogs

HTML

<a href="#example" class="openModal">Open modal</a>
<a href="#example2" class="openModal">Open a different modal</a>
<aside id="example" class="modal">
  <div>
    <h2>Modal box</h2>
    <p>The modal animation is hardware accelerated on Safari and iOS, which gives notable performance improvements. The animations are available in Chrome but will feel more sluggish. Firefox will see the opacity transition but not the bounce or minimise
      animation as it <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=435442">doesn't yet support @keyframe</a>.</p>
    <a href="#close" title="Close">Close</a>
  </div>
</aside>
<aside id="example2" class="modal">
  <div>
    <h2>Another modal box</h2>
    <input/>
    <a href="#close" title="Close">Close</a>
  </div>
</aside>

CSS

/* Container */

.modal {
  /* Overlay page content */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  /* Transition opacity on open */
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;
  /* Hide for now */
  opacity: 0;
  pointer-events: none;
}


/* Show modal */

.modal:target {
  opacity: 1;
  pointer-events: auto;
}


/* Content */

.modal > div {
  width: 500px;
  background: #fff;
  position: relative;
  margin: 10% auto;
  /* Default minimise animation */
  -webkit-animation: minimise 500ms linear;
  /* Prettify */
  padding: 30px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.9);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.9);
  background: -moz-linear-gradient(#fff, #ccc);
  background: -webkit-gradient(linear, right bottom, right top, color-stop(1, rgb(255, 255, 255)), color-stop(0.57, rgb(230, 230, 230)));
  text-shadow: 0 1px 0 #fff;
}


/* Override animation on modal open */

.modal:target > div {
  -webkit-animation-name: bounce;
}

.modal h2 {
  font-size: 36px;
  padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: scale3d(0.1, 0.1, 1);
    -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.9);
  }
  55% {
    -webkit-transform: scale3d(1.08, 1.08, 1);
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0);
  }
  75% {
    -webkit-transform: scale3d(0.95, 0.95, 1);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.9);
  }
}

@-webkit-keyframes minimise {
  from {
    -webkit-transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(0.1, 0.1, 1);
  }
}


/* Modal close link */

.modal a[href="#close"] {
  position: absolute;
  right: 0;
  top: 0;
  color:...