遮罩--自适应设备

最新推荐文章于 2020-06-28 09:47:29 发布

Inuyasha1121

最新推荐文章于 2020-06-28 09:47:29 发布

阅读量933

点赞数

分类专栏：小功能遮罩移动终端文章标签：自适应遮罩

本文链接：https://blog.csdn.net/Inuyasha1121/article/details/45671429

版权

小功能同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

移动终端

5 篇文章 0 订阅

订阅专栏

遮罩

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<script type="text/javascript">
var EV_MsgBox_ID=""; //重要  

//外部调用接口--开启遮罩(msgID-要显示的div的id)  
function EV_modeAlert(msgID){  
    //创建大大的背景框  
    var bgObj=document.createElement("div");  
    bgObj.setAttribute('id','EV_bgModeAlertDiv');  
    document.body.appendChild(bgObj);  
    //背景框满窗口显示  
    EV_Show_bgDiv();  
    //把要显示的div居中显示  
    EV_MsgBox_ID=msgID;  
    EV_Show_msgDiv();  
}  

//外部调用接口--关闭遮罩  
function EV_closeAlert(){  
    if( EV_MsgBox_ID.length>0 ){
        var msgObj=document.getElementById(EV_MsgBox_ID);  
        var bgObj=document.getElementById("EV_bgModeAlertDiv");  
        msgObj.style.display="none";  
        document.body.removeChild(bgObj);  
        EV_MsgBox_ID="";  
    }
}  

//窗口大小改变时更正显示大小和位置  
window.onresize=function(){  
    if (EV_MsgBox_ID.length>0){  
        EV_Show_bgDiv();  
        EV_Show_msgDiv();  
    } 
}  

//窗口滚动条拖动时更正显示大小和位置  
window.onscroll=function(){  
    if (EV_MsgBox_ID.length>0){  
        EV_Show_bgDiv();  
        EV_Show_msgDiv();  
    }  
}  

//把要显示的div居中显示  
function EV_Show_msgDiv(){  
    var msgObj   = document.getElementById(EV_MsgBox_ID);  
    msgObj.style.display  = "block";  
    var msgWidth = msgObj.scrollWidth;  
    var msgHeight= msgObj.scrollHeight;  
    var bgTop=EV_myScrollTop();  
    var bgLeft=EV_myScrollLeft();   
    var bgWidth=EV_myClientWidth();  
    var bgHeight=EV_myClientHeight(); 
    if( 'ontouchstart' in window ){//适应触屏设备
        bgWidth=window.innerWidth;
        bgHeight=window.innerHeight;
    }    
    var msgTop=bgTop+Math.round((bgHeight-msgHeight)/2);  
    var msgLeft=bgLeft+Math.round((bgWidth-msgWidth)/2);  
    msgObj.style.position = "absolute";  
    msgObj.style.top      = msgTop+"px";  
    msgObj.style.left     = msgLeft+"px";  
    msgObj.style.zIndex   = "10001";  

}  

//背景框满窗口显示  
function EV_Show_bgDiv(){
    var bgObj=document.getElementById("EV_bgModeAlertDiv");  
    var bgWidth=EV_myClientWidth();  
    var bgHeight=EV_myClientHeight();  
    var bgTop=EV_myScrollTop();  
    var bgLeft=EV_myScrollLeft();  
    bgObj.style.position   = "absolute";  
    bgObj.style.top        = bgTop+"px";  
    bgObj.style.left       = bgLeft+"px";
    bgObj.style.width      = bgWidth + "px";  
    bgObj.style.height     = bgHeight + "px";
    if( 'ontouchstart' in window ){//适应触屏设备
        bgObj.style.width = $(document).width()+"px";
        bgObj.style.height = $(document).height()+"px";
    }  
    bgObj.style.zIndex     = "10000";  
    bgObj.style.background = "#777";  
    bgObj.style.filter     = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60,finishOpacity=60);";  
    bgObj.style.opacity    = "0.6";

    //触屏设备 页面拖拽时 重绘遮罩提示框 位置一直居中
    document.body.ontouchmove=function(e){
        EV_Show_msgDiv();
    }  
} 

//网页被卷去的上高度  
function EV_myScrollTop(){  
    var n=window.pageYOffset   
    || document.documentElement.scrollTop   
    || document.body.scrollTop || 0;  
    return n;  
} 

//网页被卷去的左宽度  
function EV_myScrollLeft(){  
    var n=window.pageXOffset   
    || document.documentElement.scrollLeft   
    || document.body.scrollLeft || 0;  
    return n;  
} 

//网页可见区域宽  
function EV_myClientWidth(){  
    var n=document.documentElement.clientWidth   
    || document.body.clientWidth || 0;  
    return n;  
}  

//网页可见区域高  
function EV_myClientHeight(){  
    var n=document.documentElement.clientHeight   
    || document.body.clientHeight || 0;  
    return n;  
} 
</script>
</head>
<body>

<div id="envon" style=" width:300px; background-color:#FFFFFF; border:1px solid #000000; padding:20px; overflow:hidden; display:none;">  
        <p> 请等待后台响应........</p>  
</div>

<a href='#' onlick='EV_modeAlert("envon")'>开启遮罩</a>
</body>
</html>

Inuyasha1121

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
遮罩--自适应设备

<html><head><script type="text/javascript">var EV_MsgBox_ID=""; //重要 //外部调用接口--开启遮罩(msgID-要显示的div的id) function EV_modeAlert(msgID){ //创建大大的背景框 var bgObj=document.createElement("div");
复制链接

扫一扫

专栏目录