Question

我正在尝试使用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中设置的高度。

我在哪里错了？我确信这是一件相当简单的事情，我很遗憾，任何帮助都会非常感激。

Answer 1

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

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

A live demo at jsFiddle

Answer 2

我认为为html和body设置CSS可以解决您的问题。此外，如果您的页面有足够的内容可以滚动（因此弹出窗口在屏幕上），请记得使用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;
}

使用Javascript调整绝对定位元素的大小

2 个答案: