最近时不时要做些网页,也时不是用到弹出框来显示一些确认信息,
为了方便我自己使用,所以写了一个简单的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实现的手机移动端模态窗口弹出层代码,手机遮罩弹出菜单代码。