JQuery to achieve a simple page mask layer and pop up layer effect compatible with IE6 IE7

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