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

  • 2020-03-30 03:23:16
  • OfStack

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!
$.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>"); 
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 }); 

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,

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

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


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

Related articles: