The method of realizing the mask-layer pop-up box with JS

This article mainly introduced the JS implementation mask layer pop-up box, can realize the Mask layer pop-up box style definition, button events and related functions of skills, have a certain reference value, the need for friends can refer to the -->

The example of this article is about the method of realizing the mask-layer pop-up box with JS. Share to everyone for your reference. The specific analysis is as follows:

Yesterday, the company's web site needs to be prompted some information, I want to play the window of the JS Code and window Windows HTML to write together where you need to call

Don't say so much, directly on the code, feel sure there will be compatibility issues, see please point out AH:

The code is as follows: <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)" >x</a>
<div class= "title" > Tips </div>
<div id= "Msgcont" > Content </div>
</div>

<script type= "Text/javascript" >
Lock Background screen
function Lockscreen () {
var clienth = document.body.offsetHeight; Body Height
var clientw = document.body.offsetWidth; Body width
var doch = document.body.scrollHeight; Browser height
var DOCW = document.body.scrollWidth; Browser width
var BGW = clientw > DOCW? CLIENTW:DOCW; Take effective width
var BgH = clienth > doch? Clienth:doch; Take effective high
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);
}
Turn off button Events
function Popupclose (EL) {
var blackbg = document.getElementById ("BLACKBG");
BLACKBG && Document.body.removeChild (BLACKBG);
El.parentNode.style.display = "None";
}
Auto shutdown
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);
}
/**
* Function: Window information
* Parameter 1: Hint information content
* Parameter 2: The prompt information status default 0 is the prompt information, 1 is the success information
* Parameter 3: The ID of the window div, default "H-dialog"
* Parameter 4: ID of the window contents, default "Msgcont"
**/
function ShowMsg (msg) {
msg = MSG | | "Please re-operate";
var status = arguments[1] | | 0,
PopupId = arguments[2] | | "H-dialog",
ContentID = Arguments[3] | | "Msgcont";
Lockscreen ();
Screen actual height width
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;
}
}
scroll bar height width
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>

I hope this article will help you with your JavaScript programming.