You are here

弹出透明层，覆盖整个浏览器，页面元素的相对可视范围的不动半透明层两个div 两层div 覆盖挡信遮信 deepdiv

星期五, 2013-04-26 16:39 — adminshiping1

弹出透明层，覆盖整个浏览器，页面元素的相对可视范围的不动

思路是

1)弹出这个层相对于body是absolute z-index:10000;

2)另外又有一个弹出层(这个层的宽度都是body的100%)

它相对于body是absolute z-index:9999;(它的z-index比上一个层的z-index低)

这个层的样式如下;

#divJeepDiv
        {
                height:100%;
            width:100%;
           background-color:#000;
             opacity: 0.5;
           filter: alpha(opacity=50);
            z-index:100;
            position:fixed;
           display:none;
           left:0px;
           top:0px;
           _position:absolute;
           _width:1800px;
           _height:6683px;
        }

3)这两个层刚开始都是display:none;

当某事件触发时 ,才使它们都是display:block;

弹出透明层，覆盖整个浏览器，页面元素的相对可视范围的不动

分类： HTML2011-12-15 09:55 282人阅读评论(0) 收藏举报

cssfilter

说明：

在css样式中添加

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80,style=0);

用来使层透明，opacity参数越高越不透明，style为透明的样式，0为均匀。

z-index作用：为该层设置一个较高的数，保证该层位于页面所有元素的上方。

position：将该元素设置为绝对定位（fixed），保证层在可视范围内都覆盖页面。

实例：

[html] view plaincopyprint?
#divJeepDiv  
        {  
            height:100%;  
            width:100%;  
            background-color:#CCFFFF;  
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80,style=0);  
            z-index:100;  
            position:fixed;  
        }  

平忠改成

#divJeepDiv
        {
                height:100%;
            width:100%;
           background-color:#000;
             opacity: 0.5;
           filter: alpha(opacity=50);
            z-index:100;
            position:fixed;
           display:none;
           left:0px;
           top:0px;
           _position:absolute;
           _width:1800px;
           _height:6683px;
        }

普通分类: