首页 > 代码库 > 遮罩层

遮罩层

2024-07-21 17:15:46   219人阅读

1.页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 遮层 </title>
  <script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.9.0.min.js"></script>> 

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 = ‘<center><span style=\‘color:#238CAF; font-weight:bold; font-color:#238CAF;cursor:default; font-size:15px\‘>‘ + tipInfo + ‘</span><br><img src=http://www.mamicode.com/‘images/loading.gif/‘ style=/‘width:60px;height:60px;/‘ />‘;> 

动态gif图片：
 

效果图：
 

 

 
遮罩层


联系
我们