Darken the entire page when opening and produce a fade out effect when closing a dialog window

You need to create an element with fixed position that covers the entire viewable region of the page. It also must render "behind" the dialog. E.g.:

HTML

<div id="page-mask"></div>

CSS

#page-mask {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

I mocked something here: http://codepen.io/anon/pen/VLrNvb