最近时不时要做些网页，也时不是用到弹出框来显示一些确认信息，
为了方便我自己使用，所以写了一个简单的JS，
今天特意做了一个示例，简单实用，兼容性好；
弹出框在最大化、拖动改变窗口大小和拖动滚动条时都可居中显示；
起码很适合我使用！
示例如下：
<!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.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')" /><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>
相关推荐
JavaScript经典案例，实用素材。。。。。。。。。。。。。
今天我们要来分享一款基于jQuery的弹出层对话框插件，该插件包含多种对话框类型，比如提示框、确认框等。更为实用的是，这款jQuery对话框中的按钮事件也可以被我们所捕获，从而相应对话框按钮的各种事件，用起来非常...
JS 各种弹出窗口收藏版（十几种类型的弹出框，都有案例），可以以DIV层弹出，可以弹出某个页面，还可以弹出某段HTML代码和外网链接。还可更换皮肤，还可遮盖页面，还可动态控制表单控件，几乎无所不能，想怎么弹出就...
利用div+css制作弹出层并遮罩层，主用用了两个div，一个div用于弹出框，另一个则遮罩整个页面
点击弹出浮动层 弹出遮罩层 点击弹出浮动层 弹出遮罩层
点击用户登陆弹出对话框并遮罩背景 拖动滚动条两个层位置变化(如果不使用该段代码，当用户拖动滚动条遮罩层不能覆盖整个页面，对话框层也不能位于页面中间)
非常好用的jquery弹出框，也可做弹出层，遮盖层
JS+CSS遮盖层，完全支持ie等主流浏览器，并解决在ie6下无法遮盖窗口级控件问题。
一个弹出层的示例，用于在页面中弹出层，下拉列表一样会被遮盖
防遮盖JQUERY对话框，避免对话框被FLASH，视频等遮盖
实用div实现的弹出层菜单，带遮盖层，简单实用
点击弹窗按钮则弹出信息，点击右上角关闭按钮则关闭弹出层，弹出后遮盖层部分不可点击，无上拉下滑操作。用作于提示，展示列表，添加内容等操作。
WPF弹出半透明遮罩，比较简单，适合初学者
NULL 博文链接：https://tangdonnaui.iteye.com/blog/548289
弹出层 weebox。可以实现遮盖底层页面，能够遮挡下拉控件。里面有些功能经过稍稍的改版，为了应付需要。
弹出层遮罩层效果(包括居中、不随滚动条滚动)
iframe弹出框遮罩父类页面，进去之后直接打开demo里面的layout.html 页面看效果，然后查看代码；才方法不需要将子类的js 及弹出框的代码写在父类里面，依旧是写在子类页面里面
能够实现登录弹出遮盖层效果,居中显示,YinPing.html为起始页 ,效果不错 我一直在用 话说我也忘了从哪找的资源了
身份证格式验证，js遮盖层显示和隐藏
这是一款基于jQuery+HTML5实现的手机移动端模态窗口弹出层代码，手机遮罩弹出菜单代码。