0

我正在尝试使用 div 元素通过在显示隐藏的弹出窗口时屏蔽页面来模仿模式弹出对话框的效果。我已经设法达到了我想要的效果，但是我遇到了一个问题，我无法调整这个掩码元素的大小以匹配加载页面的大小。如果我只是将此 div 的高度设置为任意高度，一切正常，除了我的页面最终比内容长得多。

这是我试图设置掩码元素高度的javascript代码

function sizeModalDiv(){
  var ModalDiv = document.getElementById('ModalDiv'); 
  var FooterDiv = document.getElementById('FooterDiv');

  var FooterTop = FooterDiv.offsetTop
  var PageBottom = FooterTop + FooterDiv.clientHeight;
  ModalDiv.style.height = PageBottom+'px';
}

这是我的屏蔽元素CSS

#ModalDiv{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4000px;
  z-index: 9999;
  background-color:Black;
  opacity: 0.7;
  visibility: hidden;
}

这就是我的html代码的本质

<body>
  <div id="pagecontent">
    .......
    .......
    .......
  </div>
  <div id="ModalDiv"></div>
</body>

我已经尝试了这里建议的许多不同方法来动态调整元素大小，但似乎没有一个对我的遮罩元素的高度有任何影响。它始终保持在 CSS 中设置的高度。

我哪里错了？我确信这是我所缺少的相当简单的事情，任何帮助将不胜感激。

4

2 回答 2

1

要覆盖整个窗口，您可以使用以下 CSS：

#ModalDiv{
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color:Black;
  opacity: 0.7;
  visibility: hidden;
}

jsFiddle 的现场演示。

于 2013-08-27T06:40:48.313 回答
0

我认为设置 CSShtml并将body克服您的问题。position: fixed;此外，如果您的页面可以有足够的内容滚动（因此弹出窗口在屏幕上），请记住用于弹出窗口。

html{
 height: 100%;
 width: 100%;
 margin: 0;
 border: 0;
 padding: 0;
}

body{
 height: 100%;
 width: 100%;
 margin: 0;
 border: 0;
 padding: 0;
}

#ModalDiv{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color:Black;
  opacity: 0.7;
  visibility: hidden;
}
于 2013-08-27T06:44:22.137 回答