


jQuery implements simple web page mask layer/pop-up layer effect compatible with IE6 and IE7_jquery
May 16, 2016 pm 04:44 PMMy 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!
/*********************************
* @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("<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, 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:
<div id="kabulore-layer">
<div class="box_container">
Bounce, bounce away the crow’s feet~~
</div>
</div>
Step 4: Add the content box where you want it to pop up time, take click as an example:
$("# 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.

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Replace String Characters in JavaScript

HTTP Debugging with Node and http-console

Custom Google Search API Setup Tutorial
