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:

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:

• javascript
• html
• css
• dialog

2 Answers 2

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

Maintaining your code, you can try solving it by creating a position fixed element that is behind your #window element. I asume you are loading jQuery.

CSS

#window {
  width: 1100px;
  margin: 0 auto;
  position: absolute;
  top: 380px;
  box-shadow: 20px 20px 40px 1px #656565;
  z-index: 999;
}

#overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.3);
}

HTML

<div id="overlay"></div>

<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>

JS

(function() {
  var overlay = document.getElementById('overlay');
  var dialog = document.getElementById('window');
  document.getElementById('show').onclick = function() {
    overlay.fadeIn(250);
    dialog.fadeIn(300);
  };
  document.getElementById('exit').onclick = function() {
    overlay.fadeOut(300);
    dialog.fadeOut(250);
  };
})();