当对话框窗口打开时(不是模态或弹出)使整个页面变暗,并在关闭此对话框窗口时添加fadeOut效果

Question

我在我的页面中有这个html代码,我在其中创建了一个对话框标记.单击按钮时,将打开此对话框窗口:

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

当我点击允许我显示对话框的按钮时,我想使整个页面(除了我的对话窗口)变暗.然后,当我单击"关闭"时,我的对话框窗口关闭,整个页面返回其原始状态.

此外,当我单击关闭时,如何在对话框窗口中添加fadeOut效果？

通过对话框窗口查看图像以获得我的页面的可视化信息:

Answer 1

您需要创建一个具有固定位置的元素,该元素覆盖页面的整个可视区域.它还必须在对话框后面"渲染".例如:

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

我在这里嘲笑了一些东西:http://codepen.io/anon/pen/VLrNvb