Js implementation Mask Layer Pop-up box method, js Mask Layer Pop-up

Js implementation Mask Layer Pop-up box method, js Mask Layer Pop-up

This article describes how to implement the Mask Layer Pop-up box in js. Share it with you for your reference. The specific analysis is as follows:

Yesterday, the company's website needed a pop-up window to prompt me some information. If I want to write the js Code and the html code of the pop-up window together, I need to call

If you don't talk so much about it, You can directly access the code and feel that there will certainly be compatibility issues. If you see it, please point it out:

Copy codeThe 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)"> × </a>
<Div class = "title"> prompt </div>
<Div id = "msgCont"> content </div>
</Div>

<Script type = "text/javascript">
// Lock the 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; // Valid Width
Var bgH = clientH> docH? ClientH: docH; // valid value
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 );
}
// Close button event
Function popupClose (el ){
Var blackBg = document. getElementById ("blackBg ");
BlackBg & document. body. removeChild (blackBg );
El. parentNode. style. display = "none ";
}
// Automatically disable
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: pop-up window information
* Parameter 1: Message Content
* Parameter 2: The default status 0 indicates the prompt information, and 1 indicates the success information.
* Parameter 3: the id of the pop-up div. The default value is "H-dialog"
* Parameter 4: the id of the pop-up window content. The default value is "msgCont"
**/
Function showMsg (msg ){
Msg = msg | "Please operate again ";
Var status = arguments [1] | 0,
PopupId = arguments [2] | "H-dialog ",
ContentId = arguments [3] | "msgCont ";
LockScreen ();
// The actual height and width of the screen
Var pageWidth = window. innerWidth;
Var pageHeight = window. innerHeight;
If (typeof pageWidth! = "Number "){
If (document. compatMode = "CSS1Compat "){
PageWidth = document.doc umentElement. clientWidth;
PageHeight = document.doc umentElement. clientHeight;
} Else {
PageWidth = document. body. clientWidth;
PageHeight = document. body. clientHeight;
}
}
// Scroll bar height and width
Var scrollLeft = registry.document.doc umentElement. scrollLeft;
Var scrollTop = 0;
If (typeof window. pageYOffset! = 'Undefined '){
ScrollTop = window. pageYOffset;
} Else if (typeof example Doc ument. compatMode! = 'Undefined '&&
Window.doc ument. compatMode! = 'Background '){
ScrollTop = registry.document.doc umentElement. scrollTop;
} Else if (typeof alert Doc ument. body! = 'Undefined '){
ScrollTop = too many Doc ument. 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 design javascript programs.