A very beautiful modal dialog (or a pop-up) on a CSS3. The article: http://css-tricks.com/receding-background-modal-boxes/

index.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>
</div>

script.js

$("button").on("click", function() {
  $("body").toggleClass("dialogIsOpen");
})

style.scss

@import "compass";
@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;
    margin: 0 0 0 -25%;
    @include transform(scale(1));
  }
  h2 {
    font-size: 24px;
  }
}