0

我有

<div id=overlay>
    <div></div>
</div>

外部 div 的高度和宽度设置为 100%。

这里发生的是，100% 是指内部元素（div 内部）的大小。

我在内部 div 上有一个动态变化的元素，我想成为我的外部 div 获得页面屏幕的大小。

请注意，这些 div（外部和内部）是一个弹出元素。所以我想覆盖弹出窗口后面的所有其他元素，这就是为什么我需要 100% 的页面后面。

这是我的外部 div 的 CSS

#overlay {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%; 
 min-height: 100%;
 min-width: 100%;      
 height: auto !important;
 width: auto !important;       
 text-align:center;
 z-index: 1000; 
 background-image:url(template/popup-bg.png); 
}

我的js

function overlay(e) 
{
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
4

3 回答 3

2

只需将 HTML 更改为此

<div id='overlay' class='hideOverlay'>
    <div></div>
</div>

现在单击只需更改类。把你的js改成这个

function overlay(e) 
{
    $('#overlay').attr('class', 'showOverlay');
}

检查以下样式

.showOverlay
{
    background-color: red;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.2;
    position: fixed;        
    width: 100%;
    z-index: 1001;
}

.hideOverlay
{
    display:none;
}

背景颜色只是为了检查 div 的可见性。根据您的选择更改它。很高兴有一些opacity叠加层具有更好的外观和感觉效果。

于 2012-08-06T06:14:26.873 回答
0

尝试设置：

position: absolute;
于 2012-08-06T06:07:53.320 回答
0

像这样的东西...

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
于 2012-08-06T06:08:43.110 回答