JS动态实现遮盖网页效果

最新推荐文章于 2022-02-10 15:06:50 发布

deng11342

最新推荐文章于 2022-02-10 15:06:50 发布

阅读量4.8k

点赞数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>无标题文档</title>  
  
<script language="JavaScript" type="text/javascript">  
//|------------------------------------------------------------------------------------  
//|  
//| 说明：JS弹出全屏遮盖的对话框(弹出层后面有遮盖效果，兼容主流浏览器)  
//|       实现了在最大化、拖动改变窗口大小和拖动滚动条时都可居中显示。  
//|  
//| 注意：主要使用EV_modeAlert和EV_closeAlert这两个函数行了；  
//|       (EV_modeAlert-弹出对话框，EV_closeAlert-关闭对话框)；  
//|       注意：使用时，请在body标签内(不要在其它元素内)写一div，  
//|       再给这div赋一id属性，如：id="myMsgBox"，  
//|       然后就可以调用EV_modeAlert('myMsgBox')来显示了。  
//|       还有，请给你这div设置css：display:none让它在开始时不显示。  
//|  
//| 作者：E旺，QQ：407542585，Blog：http://blog.csdn.net/envon123，(新手)  
//|  
//|------------------------------------------------------------------------------------  
//|  
//用来记录要显示的DIV的ID值  
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(){  
    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.οnresize=function(){  
    if (EV_MsgBox_ID.length>0){  
        EV_Show_bgDiv();  
        EV_Show_msgDiv();  
    }  
}  
  
//窗口滚动条拖动时更正显示大小和位置  
window.οnscrοll=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();  
    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";  
    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";  
}  
//网页被卷去的上高度  
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>  
    <input type="button" value="弹出对话框" οnclick="EV_modeAlert('envon')" /><br />  
    <div style="width:700px; height:600px; border:1px solid #333333; margin:20px 0; line-height:300%; padding:30px;">  
        百度百科是百度为网友提供的信息存储空间，是一部内容开放、自由的网络百科全书。  
        百度百科本着平等、协作、分享、自由的互联网精神，提倡网络面前人人平等，所有人共同协作编写百科全书，  
        让知识在一定的技术规则和文化脉络下得以不断组合和拓展。为用户提供一个创造性的网络平台，  
        强调用户的参与和奉献精神，充分调动互联网所有用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享，  
        同时实现与搜索引擎的完美结合，从不同的层次上满足用户对信息的需求。  
    </div>  
    <!-- 下面这个div将会被弹出显示，其内容和样式自行编写 -->  
    <div id="envon" style=" width:300px; background-color:#FFFFFF; border:1px solid #000000; padding:20px; overflow:hidden; display:none;">  
        <a href="javascript:EV_closeAlert()">关闭</a>  
        <p>Our name was inspired by a poem written   
        more than 800 years ago during the Song Dynasty.   
        The poem compares the search for a retreating beauty amid chaotic glamour with   
        the search for one's dream while confronted by life's many obstacles. </p>  
    </div>  
</body>  
</html>

转载地址： http://blog.csdn.net/envon123/article/details/7415213

deng11342

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JS动态实现遮盖网页效果

无标题文档 //|------------------------------------------------------------------------------------ //| //| 说明：JS弹出全屏遮盖的对话框(弹出层后面有遮盖效果，兼容主流浏览器) //| 实现了在最大化、拖动改变窗口大小和拖动滚动条时都可居中显示。 //|
复制链接

扫一扫