1.页面代码：

2.JS代码(layer.js)：

//加载遮层function showLoad(tipInfo) {    var iWidth = 150;     //弹出窗口的宽度;    var iHeight = 0;    //弹出窗口的高度;    var scrolltop = 0;    var scrollleft = 0;    var cheight = 0;    var cwidth = 0;    var eTip = document.createElement('div');    eTip.setAttribute('id', 'tipDiv');    eTip.style.position = 'absolute';    eTip.style.display = 'none';    eTip.style.border = 'solid 0px #D1D1D1';    //eTip.style.backgroundColor = '#4B981D';    eTip.style.padding = '5px 5px';    eTip.style.zindex = "9999999";    if(document.body.scrollTop){//这是一个js的兼容        scrollleft=document.body.scrollLeft;        scrolltop=document.body.scrollTop;        cheight=document.body.clientHeight;        cwidth=document.body.clientWidth;    }else{        scrollleft=document.documentElement.scrollLeft;        scrolltop=document.documentElement.scrollTop;        cheight=document.documentElement.clientHeight;        cwidth=document.documentElement.clientWidth;    }    iHeight = eTip.offsetHeight;    var v_left=(cwidth-iWidth)/2 + scrollleft; //    var v_top=(cheight-iHeight)/2+ scrolltop-50;    eTip.style.left = v_left + 'px';    eTip.style.top = v_top + 'px';    window.onresize=function(){        if(document.body.scrollTop){            eTip.style.left = (document.body.clientWidth-iWidth)/2+document.body.scrollLeft;            eTip.style.top =(document.body.clientHeight-iHeight)/2+document.body.scrollTop-50;        }else{            eTip.style.left = (document.documentElement.clientWidth-iWidth)/2+document.documentElement.scrollLeft;            eTip.style.top =(document.documentElement.clientHeight-iHeight)/2+document.documentElement.scrollTop-50;        }    }    eTip.innerHTML = '
    
     
      ' + tipInfo + '
      
      
     
    ';    try {        document.body.appendChild(eTip);    } catch (e) { }    $("#tipDiv").css("float", "right");    $("#tipDiv").css("z-index", "999999999");    $('#tipDiv').show();    ShowMark();}//关闭层function closeLoad() { try{     $('#tipDiv').hide();     HideMark();    }catch(e){}}//显示蒙灰层function ShowMark() {    var xp_mark = document.getElementById("xp_mark");    if (xp_mark != null) {        //设置DIV        xp_mark.style.left = 0 + "px";        xp_mark.style.top = 0 + "px";        xp_mark.style.position = "absolute";        xp_mark.style.backgroundColor = "#F1EDED";        xp_mark.style.zIndex = "999999998";        if (document.all) {            xp_mark.style.filter = "alpha(opacity=75)";            var Ie_ver = navigator["appVersion"].substr(22, 1);            if (Ie_ver == 6 || Ie_ver == 5) {                 hideSelectBoxes();            }        }else { xp_mark.style.opacity = "0.7"; }        xp_mark.style.width = "100%";        xp_mark.style.height = "100%";        xp_mark.style.display = "block";    }else {        //页面添加div explainDiv,注意必须是紧跟body 内的第一个元素.否则IE6不正常.        $("body").prepend("
    
     ");        ShowMark(); //继续回调自己    }}//隐藏蒙灰层function HideMark() {    var xp_mark = document.getElementById("xp_mark");    xp_mark.style.display = "none";    var Ie_ver = navigator["appVersion"].substr(22, 1);    if (Ie_ver == 6 || Ie_ver == 5) {         showSelectBoxes();    }}
    

动态gif图片：

效果图：