jQuery implements simple web page mask layer/pop-up layer effect compatible with IE6 and IE7

jQuery implements simple web page mask layer/pop-up layer effect compatible with IE6 and IE7_jquery

WBOY

Release： 2016-05-16 16:44:14

Original

1561 people have browsed it

My recent job required me to rewrite all the codes of the website, so... something extremely painful happened. The people in charge of me asked not to use online plug-ins, oh~~~my god!! How can this make millions of people Requirements of Galloping Horses on the Prairie~~~

First implement a relatively simple function:

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

Fortunately, I cleverly collected a js version before, so I rewrote it into a jQuery plug-in for future use.

No more bullshit, no censorship and no truth!

Copy code The code is as follows:

/********************************* 
* @name Layer cross-browser compatibility 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("
"); 
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, isn’t it very simple, but there is a big bug here. IE6 cannot support transparent background color. Therefore, under the display of IE6, a large piece of black shit will appear~~~~

Now let’s talk about Usage:

Step one: Quote the jquery file. I won’t go into details about this. Go ahead and go by yourself, http://jquery.com

Step 2: Reference my plug-in, I won’t say much about this, Click to download,

Step 3: Look, the content you want to display in the middle box, I can’t implement it for you, so you need to build one yourself and put it at the bottom of the web page,

eg:

Copy the code The code is as follows:

Bounce, bounce away the crow’s feet~~

Step 4: Add the content box where you want it to pop up time, take click as an example:

Copy code The code is as follows:

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

You’re done!

Note: This plug-in automatically hides the pop-up layer when you click on the gray area. If you want to add a close button and then hide it, you can write the close event yourself.