JS实现弹出层,背景透明,可关闭,参照浏览器永远居中

_Jason_

浏览: 42967 次
性别:
来自: 北京

最近访客更多访客>>

进两步

hejuly

wenjiefeng

dongboy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

声明：这是一个个人很喜欢的JS实现，所以copy来了，学习效仿~

<!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>Jason</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让它在开始时不显示
//|------------------------------------------------------------------------------------
//|
//用来记录要显示的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.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();
    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="弹出对话框-基本样式" onclick="EV_modeAlert('envon')" />   
<input type="button" value="弹出对话框-可扩展" onclick="EV_modeAlert('envon1')" /><br />
    
    <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>
<div id="envon1" style=" width:300px; background-color:#F00FFF; border:10px solid #000000; padding:20px; overflow:hidden; display:none;">
        <a href="javascript:EV_closeAlert()">关闭</a>
        <p>THANK YOU!!!!!
         </p>
    </div>
</body>
</html>

分享到：

win7蓝屏代码含义~ | 清理缓存(win7+IE)

2012-10-19 11:24
浏览 6375
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论