CodePen

HTML

            
              <div id="page-wrap">
  <h1>A receding background dialog box.</h1>
  <button>Open Dialog Box</button>
</div>

<div id="dialog">
  <h2>I'm a dialog box. You  have to click a button to open me.</h2>
  <button>Close Dialog Box</button>
</div>
            
          
!
via HTML Inspector

CSS

            
              @import "compass/css3";

* {
  @include box-sizing(border-box);
}

html {
  background: #333;
}

html, body, #page-wrap {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  text-align: center;
  font: 16px Sans-Serif;

  // Hack for performance, sometimes
  // -webkit-transform: translateZ(0);
}

h1 {
  margin: 0 0 50px 0;
  font: bold 40px Sans-Serif;
}

#page-wrap {
  padding: 50px;
  background: #F06D06;
  box-shadow: 0 0 100px black;

  @include transition(all 0.4s ease);
  @include filter(
    blur(0)
    grayscale(0)
  );

  .dialogIsOpen & {
    @include filter(
      blur(5px)
      grayscale(50%)
    );
    @include transform(scale(0.9));
  }
}

#dialog {
  @include transition(all 0.4s ease);
  border-radius: 15px;
  pointer-events: none;
  position: fixed;
  width: 50%;
  padding: 60px;
  background: white;
  box-shadow: 0 0 25px black;
  top: 50%;
  left: 50%;
  margin: -25% 0 0 -25%;
  opacity: 0;
  @include transform(scale(1.5));
  .dialogIsOpen & {
    pointer-events: auto;
    opacity: 1;
    @include transform(scale(1));
  }
  h2 {
    font-size: 24px;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("button").on("click", function() {
  $("body").toggleClass("dialogIsOpen");
})
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................