這篇文章主要介紹了js實(shí)現(xiàn)遮罩層彈出框的方法,可實(shí)現(xiàn)對(duì)遮罩層彈出框的樣式定義、按鈕事件及相關(guān)功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)遮罩層彈出框的方法。分享給大家供大家參考。具體分析如下：
昨天公司網(wǎng)站需要彈窗提示一些信息,要我在把彈窗的js代碼和彈窗窗口html寫(xiě)在一起哪里需要就調(diào)用
不說(shuō)那么多了,直接上代碼,感覺(jué)肯定會(huì)有兼容問(wèn)題,看到了請(qǐng)指出?。?BR> 代碼如下:
<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ì)有所幫助。