Recent work has required rewriting all the site code, so… The extremely painful thing appeared, tube my person request cannot use the plug-in on the net, oh~~~my god!! This is how to let thousands of prairie horses galloping requirements ~~~

First, a relatively simple function:

Requirements: web mask layer/pop-up layer, compatible with IE6

Fortunately, Ben zhushi before the clever collection of a js version, so, their own rewrite into the form of jQuery plug-in, convenient to use in the future.

No bullshit, no code, no truth!

;(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.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
var maxHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.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, is not very simple, but there is a big bug here, unable to make IE6 support transparent background color, so, in IE6 display, there will be a large black shit ~~~~

Now let’s talk about Usage:

Step 1: refer to the jquery file. Without further explanation, go to http://jquery.com

Step 2: the plug-in references in me, this is also not much said, (link: http://xiazai.jb51.net/201406/yuanma/layer\_jb51.net.rar).

Step 3: you see, you want to display in the middle of the content box, I am not able to give you to achieve, so you need to build your own, put it at the bottom of the page can be,

Eg:

<div id="kabulore-layer">
<div class="box_container">
 Bounce, bounce away the crow's feet ~~
</div>
</div>

Step 4: add a time where you want to pop up the content box. Take click for example:

$("#tan").click(function(){
$("#kabulore-layer").layer();
});

Done!

Note: this plugin will hide the pop-up layer automatically when the grey area is clicked. If you want to add a close button to hide, you can write a close event by yourself