弹出窗口时使用css禁用背景

时间:2013-06-14 07:56:07

标签: html css css3

我在弹出窗口时使用以下css代码来阻止整个页面。但它正在工作(可见页面仅涵盖了所有内容)。我有一个问题,如果我的页面有一个滚动条意味着页面的剩余底部没有被拦截器覆盖。

.parentDisable
        {
            z-index: 99999;
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            background-color: #000;
            color: #aaa;
            opacity: 0.8;
            filter: alpha(opacity=100);
        }
        #popup
        {
            width: 300;
            height: 300;
            position: relative;
            color: #000;
            top: 25%;
        }

1 个答案:

答案 0 :(得分:13)

使用此css

.parentDisable{
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.8;
    z-index: 998;
    height: 100%;
    width: 100%;}

#popup{
    position: absolute;
    z-index: 999;}

和这个html

<div class="parentDisable"></div>
<div id="popup">My pop up</div>