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

Sizing an absolute positioned element with Javascript

本文关键字：元素 定位 Javascript 调整 使用      更新时间：2023-09-26

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

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

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

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

jsFiddle的现场演示。

我认为为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;
}
相关文章：