JS弹出对话框_JS弹出层遮盖效果_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>
?
?
