当出现弹出窗口时使用css禁用后台 [英] disable background using css when popup appear

问题描述

我使用下面的CSS代码来阻止整个页面弹出时出现。但它的工作（可见页只覆盖不是所有）。我有一个问题，如果我的页面有一个滚动条意味着页面的剩余底部不被阻止程序覆盖。

I am using the below css code to block the entire page when the popup appeared. But it's working(The visible page only covered not all). I have a problem, if my page having a scroll bar means the remaining bottom of the page not covered by the blocker.

.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%;
        }

推荐答案

使用此css

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

和此html

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

这篇关于当出现弹出窗口时使用css禁用后台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！