足球游戏_中国足彩网￥体育资讯$

这篇文章主要介绍了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程序设计有所帮助。