请教一个问题：在现有函数上修改让一个遮罩层自适应屏幕大小

Question

写了一个遮罩层函数，但有一个问题就是无法让遮罩背景层自适应屏幕大小，想在现有函数基础上进行修改，没有思路，在此求助，谢谢！代码：<script>
function gid(id){
return document.getElementById(id);
}function popa(id,src){
if(!gid(id)) return false;
var viewA=gid(id);
var viewB=gid("viewB");
var viewM=gid("viewM");
var viewC=gid("viewC");
var viewP=gid("viewP");
var sysC,sysW,sysH; if(document.compatMode=="CSS1Compat"){
sysC=document.documentElement;
sysW=document.documentElement.clientWidth;
sysH=document.documentElement.clientHeight;
}else{
sysC=document.body;
sysW=document.body.clientWidth;
sysH=document.body.clientHeight;
} function popS(){
viewB.style.display="block";
viewB.style.width=sysW+"px"; //当window.onresize时想让宽度自适应屏幕大小
viewB.style.height=sysH+"px"; //当window.onresize时想让高度自适应屏幕大小
viewM.style.display="block";
viewM.style.left=(sysW/2-viewM.offsetWidth/2)+"px";
viewM.style.top=(sysH/2-viewM.offsetHeight/2)+"px";
viewP.src=src;
sysC.style.cssText="overflow:hidden";
} function popC(){
viewB.style.cssText="display:none;";
viewM.style.cssText="display:none;";
sysC.style.cssText="overflow:auto;";
} viewA.onclick=popS
viewC.onclick=popC;
viewB.onclick=popC;}
// =pop
popa("appmPhoto","img/product_n_big.gif");
</script>

Answer 1

添加resize事件更新sysW，sysH不就好了function popa(id,src){
    if(!gid(id)) return false;
    var viewA=gid(id);
    var viewB=gid("viewB");
    var viewM=gid("viewM");
    var viewC=gid("viewC");
    var viewP=gid("viewP");
    var sysC,sysW,sysH;    if(document.compatMode=="CSS1Compat"){
        sysC=document.documentElement;
        sysW=document.documentElement.clientWidth;
        sysH=document.documentElement.clientHeight;
    }else{
        sysC=document.body;
        sysW=document.body.clientWidth;
        sysH=document.body.clientHeight;
    }
//////////////////////
window.onresize=function(){
    if(document.compatMode=="CSS1Compat"){
        sysC=document.documentElement;
        sysW=document.documentElement.clientWidth;
        sysH=document.documentElement.clientHeight;
    }else{
        sysC=document.body;
        sysW=document.body.clientWidth;
        sysH=document.body.clientHeight;
    }
}
//////////////////////
    function popS(){
        viewB.style.display="block";
        viewB.style.width=sysW+"px"; 
        viewB.style.height=sysH+"px";
        viewM.style.display="block";
        viewM.style.left=(sysW/2-viewM.offsetWidth/2)+"px";
        viewM.style.top=(sysH/2-viewM.offsetHeight/2)+"px";
        viewP.src=src;
        sysC.style.cssText="overflow:hidden";
    }    function popC(){
        viewB.style.cssText="display:none;";
        viewM.style.cssText="display:none;";
        sysC.style.cssText="overflow:auto;";
    }    viewA.onclick=popS
    viewC.onclick=popC;
    viewB.onclick=popC;}

Answer 2

window.onresize=function(){
    if(document.compatMode=="CSS1Compat"){
        sysC=document.documentElement;
        sysW=document.documentElement.clientWidth;
        sysH=document.documentElement.clientHeight;
    }else{
        sysC=document.body;
        sysW=document.body.clientWidth;
        sysH=document.body.clientHeight;
    }//////////////////////忘记重新设置位置了，添加下面的
    viewB.style.width=sysW+"px"; 
    viewB.style.height=sysH+"px";
    viewM.style.left=(sysW/2-viewM.offsetWidth/2)+"px";
    viewM.style.top=(sysH/2-viewM.offsetHeight/2)+"px";
}

Answer 3

append到body里面，然后width，height都设为'100%',left,top都设为0不就好了