日期:2014-05-16  浏览次数:20366 次

js弹层问题,急。。。
在火狐浏览器不兼容,遮罩层没有透明度。

JScript code
<style type="text/css">
        #massage_box
        {
            position: absolute;
            z-index:9999;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 200px;
            background: #fff;
            margin: -102px 0 0 -202px;
            display: none;
        }
        #mask
        {
            background-color: #666666;
            z-index:1;
            position: absolute;
            width:1024px;
            height:1000px;
            opacity=0.5; 
            display: none;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
        }
        .massage
        {
            border: #036 solid;
            border-width: 1 1 3 1;
            width: 95%;
            height: 95%;
            background: #fff;
            color: #036;
            font-size: 12px;
            line-height: 150%;
        }
        .header
        {
            background: #036;
            height: 10%;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            padding: 0 0 0 0;
            color: #fff;
        }
        .font
        {
            font-size: 14px;
        }
    </style>

    <script type="text/javascript">
    
    var Obj=''   
document.onmouseup=MUp   
document.onmousemove=MMove  

function MDown(Object){   
    Obj=Object.id   
    document.all(Obj).setCapture()   
    pX=event.x-document.all(Obj).style.pixelLeft;   
    pY=event.y-document.all(Obj).style.pixelTop;   
}  

//鼠标移动
function MMove(){   
    if(Obj!=''){   
        document.all(Obj).style.left=event.x-pX;   
        document.all(Obj).style.top=event.y-pY;   
    }   
}  

function MUp(){   
    if(Obj!=''){   
        document.all(Obj).releaseCapture();   
        Obj='';   
    }   
}   

//弹出层
function d_x(){  
    //mask.style.width = document.body.scrollWidth + "px";  
    //mask.style.height = document.body.scrollHeight + "px";
    //mask.style.left = (parseInt(document.body.scrollWidth) - 1024) / 2 + "px"; // 屏幕居中    
    mask.style.display = "block";
    massage_box.style.display = "block"    ;

}  

//取消层
function d_y(){  

    mask.style.display = "none";
    massage_box.style.display = "none"    ;

}  


------解决方案--------------------
注意红色部分

#mask
{
background-color: #666666;
z-index:1;
position: absolute;
width:1024px;
height:1000px;
opacity:0.5;
display: none;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
------解决方案--------------------
属性啊 opacity在标准浏览器中可以实现透明,如果是IE就可以使用filter
------解决方案--------------------
把-moz-opacity去掉,ff下只要使用opacity:0.5就行了,前面那个已经无效了