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

我试图使用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'; 
}

的JavaScript代码，这里是我的遮蔽元件

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

CSS，这是本质的我的html代码

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

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

我在哪里出错了？我敢肯定，这是一件相当简单的事情，我错过了任何帮助，将不胜感激。

来源

2013-08-27 D.Hussey

为什么不能使用'height：100％;'？ –

[示例]（http://api.jquery.com/height）这里是一个如何获得身高的例子;你也可以使用jquery设置高度 – Asdakamessoy

覆盖整个窗口，你可以使用这个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。

来源

2013-08-27 06:40:48 Teemu

非常感谢你Teemu，这已经像一个魅力 –

我认为设置为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; 
}

来源

2013-08-27 06:44:22 Grallen

感谢您的建议，但这只是设置我的遮罩元素的高度的浏览器窗口的高度，而不是页面的高度 –

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

回答

相关问题