javascript - 打开时使整个页面变暗，关闭对话框窗口时产生淡出效果

我在创建对话框标签的页面中有此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>

当我单击允许显示对话框的按钮时，我想使我的整个页面(对话框窗口除外)变暗。然后，当我单击“关闭”时，我的对话框窗口关闭，我的整个页面返回到其原始状态。

此外，当我单击“关闭”时如何在对话框窗口中添加淡出效果？

通过对话框窗口查看图像以使我的页面具有视觉信息:

最佳答案

您需要创建一个固定位置的元素，该元素覆盖页面的整个可见区域。它还必须在对话框“后面”呈现。例如。:

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

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

关于javascript - 打开时使整个页面变暗，关闭对话框窗口时产生淡出效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31054353/