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

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

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

不說(shuō)那么多了,直接上代碼,感覺肯定會(huì)有兼容問題,看到了請(qǐng)指出?。?/p>

代碼如下:

<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ì)有所幫助。

更多信息請(qǐng)查看IT技術(shù)專欄