jQuery implémente un simple effet de couche de masque de page Web/couche contextuelle compatible avec IE6 et IE7

jQuery implémente un simple effet de couche de masque de page Web/couche contextuelle compatible avec IE6 et IE7_jquery

WBOY

Libérer： 2016-05-16 16:44:14

original

1575 Les gens l'ont consulté

Mon récent travail m'a obligé à réécrire tous les codes du site, alors... quelque chose d'extrêmement douloureux s'est produit. Les personnes en charge de moi ont demandé de ne pas utiliser de plug-ins en ligne, oh~~~mon dieu, comment cela peut-il faire !! des millions de personnes Exigences des chevaux au galop dans la prairie ~~~

Implantez d'abord une fonction relativement simple :

Exigences : couche de masque de page Web/couche contextuelle, compatible avec IE6

Heureusement, j'ai intelligemment collecté une version js auparavant, je l'ai donc réécrite dans un plug-in jQuery pour une utilisation future.

Plus de conneries, pas de censure et pas de vérité !

Copier le code Le code est le suivant :

/****************************** 
* Plug-in de compatibilité multi-navigateurs @name Layer v1.0 
* ** *****************************/ 
; (function($){ 
$.fn.layer = function(){ 
var isIE = (document.all) ? true : false; 
var isIE6 = isIE && !window.XMLHttpRequest ; 
var position = !isIE6 ? "fixed" : "absolute"; 
var containersBox = jQuery(this); :"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"; .css( {"width" : maxWidth , "height" : maxHeight }); 
} 
function containersBox_iestyle(){ 
var marginTop = jQuery(document).scrollTop - containersBox.height()/ 2 "px" ; 
var marginLeft = jQuery(document).scrollLeft - containersBox.width()/ 2 
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(); 
}); .click( function(){ 
containerBox.hide(); 
jQuery(this).remove(); 
} 
})(jQuery); >

Haha, n'est-ce pas très simple, mais il y a un gros bug ici. IE6 ne peut pas prendre en charge la couleur d'arrière-plan transparente, donc sous l'affichage d'IE6, un gros morceau de merde noire apparaîtra~~~. ~ 

Parlons maintenant de 
Utilisation : 

Première étape : Citez le fichier jquery Je n'entrerai pas dans les détails à ce sujet. Allez-y par vous-même. http://jquery.com
Étape 2 : Référencez mon plug-in, je n'en dirai pas grand chose, Cliquez pour télécharger
,

Étape 3 : Écoutez, le contenu que vous souhaitez afficher dans la zone du milieu, je ne peux pas l'implémenter pour vous, vous devez donc en créer un vous-même et le mettre en bas de la page Web,
par exemple :

Copiez le code

Le code est le suivant :

Rebondissez, rebondissez sur les pattes d'oie~~

🎜>Étape 4 : Ajoutez la zone de contenu à l'endroit où vous souhaitez qu'elle apparaisse, prenez le clic comme exemple :

Copier le code

Le code est le suivant :

$("# tan").click(function(){ $("#kabulore-layer").layer(); } ); Vous avez terminé !

Remarque : Ce plug-in masque automatiquement le calque contextuel lorsque vous cliquez sur la zone grise. Si vous souhaitez ajouter un bouton de fermeture puis le masquer, vous pouvez écrire vous-même l'événement de fermeture.