打开时使整个页面变暗并在关闭对话框时产生淡出效果 window

Question

我在创建对话标记的页面中有此 html 代码。当我单击一个按钮时，此对话框 window 打开：

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

我想在单击允许我显示对话框的按钮时使整个页面变暗（对话框 window 除外）。然后，当我单击关闭时，我的对话框 window 关闭并且我的整个页面 returns 回到其原始状态。

此外，当我点击 "Close" 时，如何在我的对话框 window 上添加淡出效果？

查看图像以获取带有对话框的我的页面的视觉信息window：

Answer 1

您需要创建一个位置固定的元素，覆盖页面的整个可视区域。它还必须呈现 "behind" 对话框。例如：

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

Answer 2

维护您的代码，您可以尝试通过在您的#window 元素后面创建一个位置固定的元素来解决它。我假设您正在加载 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);
  };
})();

打开时使整个页面变暗并在关闭对话框时产生淡出效果 window

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

html

javascript

css

dialog