| 标题 | js实现遮罩层弹出框的方法 |
| 范文 | 这篇文章主要介绍了js实现遮罩层弹出框的方法,可实现对遮罩层弹出框的样式定义、按钮事件及相关功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现遮罩层弹出框的方法。分享给大家供大家参考。具体分析如下： 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊： 代码如下: <style> #h-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;} #h-dialog .close{float:right;font-size: 30px;margin-right: 10px;margin-top:5px;cursor:pointer;} #h-dialog .title{height: 40px;padding-left:10px; font-size:20px; line-height:40px;} #h-dialog #msgcont{height:36px; margin: 30px 0 50px;padding-left: 65px;font-size: 25px;line-height: 36px;vertical-align: middle; background: url(../images/ui_alert.png) no-repeat 20px 50%;} </style> <div id=h-dialog> <a class=close onclick=popupclose(this)>×</a> <div class=title>提示</div> <div id=msgcont>内容</div> </div> <script type=text/javascript> //锁定背景屏幕 function lockscreen() { var clienth = document.body.offsetheight; //body高度 var clientw = document.body.offsetwidth; //body宽度 var doch = document.body.scrollheight; //浏览器高度 var docw = document.body.scrollwidth; //浏览器宽度 var bgw = clientw > docw ? clientw : docw; //取有效宽 var bgh = clienth > doch ? clienth : doch; //取有效高 var blackbg = document.createelement(div); blackbg.id = blackbg; blackbg.style.position = absolute; blackbg.style.zindex = 99999; blackbg.style.top = 0; blackbg.style.left = 0; blackbg.style.width = bgw+px; blackbg.style.height = bgh+px; blackbg.style.opacity = 0.4; blackbg.style.backgroundcolor = #333; document.body.appendchild(blackbg); } //关闭按钮事件 function popupclose(el) { var blackbg = document.getelementbyid(blackbg); blackbg && document.body.removechild(blackbg); el.parentnode.style.display = none; } //自动关闭 function autoclose(id) { id = id || h-dialog; var blackbg = document.getelementbyid(blackbg); var objdiv = document.getelementbyid(id); settimeout(function(){ blackbg && document.body.removechild(blackbg); objdiv.style.display = none; },2000); } /** *功能 : 弹窗信息 *参数1 : 提示信息内容 *参数2 : 提示信息状态默认0 为提示信息,1为成功信息 *参数3 : 弹窗div的id,默认h-dialog *参数4 : 弹窗内容的id,默认msgcont **/ function showmsg(msg) { msg = msg || 请重新操作; var status = arguments[1] || 0, popupid = arguments[2] || h-dialog, contentid = arguments[3] || msgcont; lockscreen(); //屏幕实际高宽 var pagewidth = window.innerwidth; var pageheight = window.innerheight; if (typeof pagewidth != number) { if (document.compatmode == css1compat) { pagewidth = document.documentelement.clientwidth; pageheight = document.documentelement.clientheight; } else { pagewidth = document.body.clientwidth; pageheight = document.body.clientheight; } } //滚动条高宽 var scrollleft = window.document.documentelement.scrollleft; var scrolltop = 0; if (typeof window.pageyoffset != 'undefined') { scrolltop = window.pageyoffset; } else if (typeof window.document.compatmode != 'undefined' && window.document.compatmode != 'backcompat') { scrolltop = window.document.documentelement.scrolltop; } else if (typeof window.document.body != 'undefined') { scrolltop = window.document.body.scrolltop; } var div_x = (pagewidth - 400) / 2 + scrollleft; var div_y = (pageheight - 200) / 2 + scrolltop; var objdiv = document.getelementbyid(popupid); if (status) { document.getelementbyid(contentid).style.background = url($root/assets/images/ui_success.png) no-repeat 20px 50%; } document.getelementbyid(contentid).innerhtml = msg; objdiv.style.display = block; objdiv.style.left = div_x + px; objdiv.style.top = div_y + px; autoclose(popupid); } </script> 希望本文所述对大家的javascript程序设计有所帮助。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。