modal

by fangunxs

HTML

<div id="page-wrap">
    <!-- all page content -->
    A receding background dialog box.
    <button>Oepn</button>
  </div>

  <div id="modal">
    <!-- modal box content -->
      I'm a dialog box. You have to click a button to open me.
      <button>Close</button>
  </div>

CSS

body {
  /* Use at your own discretion */
  -webkit-transform: translateZ(0);
}

#modal {
  background: black;

  position: fixed;
  width: 50%;
  top: 50%;
  left: 50%;
  margin: -25% 0 0 -25%;

  /* Embiggen */
  transform: scale(1.5); /* prefix me */
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);

  /* Hidden */
  opacity: 1;
  pointer-events: none;
}

.dialogIsOpen #page-wrap {

  /* Blur and de-color */
  -webkit-filter: blur(5px) grayscale(50%);

  /* Recede */
  -webkit-transform: scale(0.9);

}

.dialogIsOpen #modal {
  
  /* Regular size and visible */
  transform: scale(1); /* prefix me */
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  opacity: 1;

  /* Clickable */
  pointer-events: auto;

}

#page-wrap, #modal {
  -webkit-t
  transition: all 0.4s ease; /* prefix me */
  -webkit-transition: all 0.4s ease;
}

JavaScript

// Something happens
$("button").on("click", function() {

  // State changes
  $("body").toggleClass("dialogIsOpen");

});