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

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn