弹出层背景透明度问题...

百度 jquery弹出层插件应该能找到满足你要求的插件

lightbox效果，获取视窗的宽和高，半透明层设置为视窗的高/宽，设置透明样式，浮动层那个自己计算为准，设置为absolute<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
.alpha{position:absolute;z-index:10;left:0px;top:0px;filter:alpha(opacity=50);opacity:.5;background:#000000;}
</style>
<script>
    window.onload = function () {
        var backCompat = document.compatMode == 'BackCompat';
        var w = backCompat ? document.body.scrollWidth : document.documentElement.scrollWidth
        , h = backCompat ? Math.max(document.body.clientHeight, document.body.scrollHeight) : document.documentElement.scrollHeight;
        var div = document.createElement('div');
        div.className = 'alpha';
        div.id = 'lightbox';
        div.style.width = w + 'px';
        div.style.height = h + 'px';
        document.body.appendChild(div)
    }
</script>
底层内容

弹一个div 设置position为absolute/fixed left top bottom right都为0 透明ie用filter:alpha(opacity=50) w3c opacity:.5 颜色改变设置background-color
这些属性都可以通过js设置

当我创建了一个背景div 可以透明. 但同时我想,弹出来的那个div 在这个背景div的里面.同时,弹出来的div不透明.该怎么做?谢谢斑竹先...

问题我还有一个弹出内容的div. 背景是不透明的,我还想放在整个为背景为黑色透明层的里面...

第二个div通过定位定位到指定的位置和第一个一样只是不要设置透明而且两个div不要是父子关系否则第二个div也会透明的

我现在就遇到一个这样的问题...内两个div现在必须是父子关系.并且,子div不可以透明....大神,求指教..

我现在就遇到一个这样的问题...内两个div现在必须是父子关系.并且,子div不可以透明....大神,求指教..
而且,背景的透明度是可以指定的...小弟跪谢...

除了css3 用rgba外的话貌似css2不能的样子

当我创建了一个背景div 可以透明. 但同时我想,弹出来的那个div 在这个背景div的里面.同时,弹出来的div不透明.该怎么做?谢谢斑竹先...要做2个不同的层<style>
.alpha{position:absolute;z-index:10;left:0px;top:0px;filter:alpha(opacity=50);opacity:.5;background:#000000;}
.infolayer{position:absolute;width:400px;height:300px;background:#ffffff;z-index:1000}
</style>
<script>
    window.onload = function () {
        var backCompat = document.compatMode == 'BackCompat';
        var w = backCompat ? document.body.scrollWidth : document.documentElement.scrollWidth
        , h = backCompat ? Math.max(document.body.clientHeight, document.body.scrollHeight) : document.documentElement.scrollHeight;        var div = document.createElement('div');
        div.className = 'alpha';
        div.id = 'lightbox';
        div.style.width = w + 'px';
        div.style.height = h + 'px';
        document.body.appendChild(div);
        div = document.createElement('div');
        div.className = 'infolayer';
        document.body.appendChild(div);
        div.style.top = (h - div.offsetHeight)/2 + 'px';
        div.style.left = (w - div.offsetWidth)/2 + 'px';
    }
    </script>

当我创建了一个背景div 可以透明. 但同时我想,弹出来的那个div 在这个背景div的里面.同时,弹出来的div不透明.该怎么做?谢谢斑竹先...要做2个不同的层<style>
.alpha{position:absolute;z-index:10;left:0px;top:0px;filter:alpha(opacity=50);opacity:.5;background:#000000;}
.infolayer{position:absolute;width:400px;height:300px;background:#ffffff;z-index:1000}
</style>
<script>
    window.onload = function () {
        var backCompat = document.compatMode == 'BackCompat';
        var w = backCompat ? document.body.scrollWidth : document.documentElement.scrollWidth
        , h = backCompat ? Math.max(document.body.clientHeight, document.body.scrollHeight) : document.documentElement.scrollHeight;        var div = document.createElement('div');
        div.className = 'alpha';
        div.id = 'lightbox';
        div.style.width = w + 'px';
        div.style.height = h + 'px';
        document.body.appendChild(div);
        div = document.createElement('div');
        div.className = 'infolayer';
        document.body.appendChild(div);
        div.style.top = (h - div.offsetHeight)/2 + 'px';
        div.style.left = (w - div.offsetWidth)/2 + 'px';
    }
    </script>其实我就想做两个 div。一个为透明背景层. 一个为显示层.同时显示层不可以透明.这两个div为父子关系.斑竹大人..

是的，背景层和弹出层不能是父子关系，否则opacity属性会影响弹出层。不过即使是父子关系，也是有解的，那就是半透明不用opacity来解决。此方法兼容IE6+，chrome、firefox自不必说。
在支持css3的浏览器上，用backgorund: rgba(0,0,0,.4)，不支持rgba颜色的浏览器（IE678）使用IE filter中的gradient，IE滤镜的颜色支持alpha通道，startcolorstr/endcolorstr 取值是#AARRGGBB ,前两位表示alpha透明值。.bg{
background-color: rgba(0,0,0,.5);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#88000000,endcolorstr=#88000000e);
}

调试易

弹出层背景透明度问题...

解决方案 »