這篇文章主要介紹了js實(shí)現(xiàn)遮罩層彈出框的方法,可實(shí)現(xiàn)對(duì)遮罩層彈出框的樣式定義、按鈕事件及相關(guān)功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)遮罩層彈出框的方法。分享給大家供大家參考。具體分析如下：

昨天公司網(wǎng)站需要彈窗提示一些信息,要我在把彈窗的js代碼和彈窗窗口html寫在一起哪里需要就調(diào)用

不說(shuō)那么多了,直接上代碼,感覺(jué)肯定會(huì)有兼容問(wèn)題,看到了請(qǐng)指出啊：

代碼如下:

<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>內(nèi)容</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);

}

//關(guān)閉按鈕事件

function popupclose(el) {

var blackbg = document.getelementbyid(blackbg);

blackbg && document.body.removechild(blackbg);

el.parentnode.style.display = none;

}

//自動(dòng)關(guān)閉

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);

}

/**

*功能 : 彈窗信息

*參數(shù)1 : 提示信息內(nèi)容

*參數(shù)2 : 提示信息狀態(tài)默認(rèn)0 為提示信息,1為成功信息

*參數(shù)3 : 彈窗div的id,默認(rèn)h-dialog

*參數(shù)4 : 彈窗內(nèi)容的id,默認(rèn)msgcont

**/

function showmsg(msg) {

msg = msg || 請(qǐng)重新操作;

var status = arguments[1] || 0,

popupid = arguments[2] || h-dialog,

contentid = arguments[3] || msgcont;

lockscreen();

//屏幕實(shí)際高寬

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;

}

}

//滾動(dòng)條高寬

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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。