JQuery implements simple webpage Mask Layer/pop-up layer effects compatible with IE6 and IE7

This diaosi recently asked me to rewrite all the code on the website. so... it was very painful. My team asked me not to use plug-ins on the Internet. oh ~~~ My god !! This is a requirement that allows tens of millions of horses to Pentium on the grassland ~~~

First, implement a simple function:

Requirement: webpage Mask Layer/pop-up layer, compatible with IE6

Fortunately, Ben diaosi used to collect a js version. so, he changed it to the jQuery plug-in form for later use.

Not much nonsense, no code, no truth!
Copy codeThe Code is as follows:
/*******************************
* @ Name Layer cross-browser compatible plug-in v1.0
*******************************/
; (Function ($ ){
$. Fn. layer = function (){
Var isIE = (document. all )? True: false;
Var isIE6 = isIE &&! Window. XMLHttpRequest;
Var position =! IsIE6? "Fixed": "absolute ";
Var containerBox = jQuery (this );
ContainerBox.css ({"z-index": "9999", "display": "block", "position": position, "top": "50%", "left ": "50%", "margin-top":-(containerBox. height ()/2) + "px", "margin-left":-(containerBox. width ()/2) + "px "});
Var layer = jQuery ("<div> </div> ");
Layer.css ({"width": "100%", "height": "100%", "position": position, "top": "0px", "left ": "0px", "background-color": "#000", "z-index": "9998", "opacity": "0.6 "});
JQuery ("body"). append (layer );
Function layer_iestyle (){
Var maxWidth = Math.max(document.doc umentElement. scrollWidth, document.doc umentElement. clientWidth) + "px ";
Var maxHeight = Math.max(document.doc umentElement. scrollHeight, document.doc umentElement. clientHeight) + "px ";
Layer.css ({"width": maxWidth, "height": maxHeight });
}
Function containerBox_iestyle (){
Var marginTop = jQuery (document). scrollTop-containerBox. height ()/2 + "px ";
Var marginLeft = jQuery (document). scrollLeft-containerBox. width ()/2 + "px ";
ContainerBox.css ({"margin-top": marginTop, "margin-left": marginLeft });
}
If (isIE ){
Layer.css ("filter", "alpha (opacity = 60 )");
}
If (isIE6 ){
Layer_iestyle ();
ContainerBox_iestyle ();
}
JQuery ("window"). resize (function (){
Layer_iestyle ();
});
Layer. click (function (){
ContainerBox. hide ();
JQuery (this). remove ();
});
};
}) (JQuery );

Haha, isn't it very simple, but here there is a big bug that cannot make IE6 support background color transparency, so, in IE6 display, there will be a large piece of shit black ~~~~

For nowUsage:

The first step: Reference jquery file, this does not say much, let's go down, http://jquery.com

Step 2: reference this plug-in. Click to download it,

Step 3: You see, if you want to display the content box in the middle, I cannot implement it for you, so you need to create one by yourself and put it at the bottom of the web page,

Eg:
Copy codeThe Code is as follows:
<Div id = "kabulore-layer">
<Div class = "box_container">
Play the bullet and take the crow's feet ~~
</Div>
</Div>

Step 4: Add a time in the place where you want to pop up the content box. Take click as an example:
Copy codeThe Code is as follows:
$ ("# Tan"). click (function (){
$ ("# Kabulore-layer"). layer ();
});

Success!

Note: This plug-in is automatically hidden when you click the gray area. If you want to add a close button to hide the plug-in, you can write the close event by yourself.