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

Question

I have this html code in my page where I create a dialog tag. When I click on a button, this dialog window opens:

<!-- note that the CSS is in another file, it just to show you -->
<style type="text/css" media="screen"> 
  #window {
    width: 1100px;
    margin: 0 auto;
    position: absolute;
    top: 380px;
    box-shadow: 20px 20px 40px 1px #656565;
  }
</style>

<dialog id="window">
  <div class="header">
    <ul class="nav nav-tabs">
        <li role="presentation" class="active">
          <a>Detail</a>
        </li>
        <button class="btn btn-danger btn-sm pull-right" id="exit">Close</button>
    </ul>
  </div>
  <div class="panel-body page-header">
    <!-- my content here -->
  </div>
</dialog>
<script>
  (function() {
    var dialog = document.getElementById('window');
    document.getElementById('show').onclick = function() {
      dialog.show();
    };
    document.getElementById('exit').onclick = function() {
      dialog.close();
    };
  })();
  $('#window').addClass('animated fadeIn');
</script>

I would like to darken all my entire page (except my dialog window) when I click on the button who allows me to display the dialog. And then, when I click on Close, my dialog window closes and my entire page returns to its original state.

Moreover, how can I add a fade out effect on my dialog window when I click on "Close"?

See the image to have a visual information my page with the dialog window:

Answer 1

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