jQuery implementiert einen einfachen Webseitenmaskenebenen-/Popupebeneneffekt, der mit IE6 und IE7

jQuery implementiert einen einfachen Webseitenmaskenebenen-/Popupebeneneffekt, der mit IE6 und IE7_jquery kompatibel ist

WBOY

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

Original

1537 Leute haben es durchsucht

Mein letzter Job erforderte, dass ich alle Codes der Website neu schrieb, also passierte etwas äußerst Schmerzhaftes. Die Leute, die für mich verantwortlich waren, baten darum, keine Online-Plugins zu verwenden, oh mein Gott! Millionen von Menschen Anforderungen an galoppierende Pferde in der Prärie~~~

Implementieren Sie zunächst eine relativ einfache Funktion:

Anforderungen: Webseitenmaskenebene/Popup-Ebene, kompatibel mit IE6

Glücklicherweise habe ich zuvor geschickt eine js-Version gesammelt und sie für die zukünftige Verwendung in ein jQuery-Plug-in umgeschrieben.

Kein Bullshit mehr, keine Zensur und keine Wahrheit!

Code kopieren Der Code lautet wie folgt:

/******************************* 
* @name Layer browserübergreifendes Kompatibilitäts-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({"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); 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 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)"); 🎜>layer_iestyle(); 
containerBox_iestyle(); 
jQuery("window").resize(function(){ 
layer_iestyle(); 
layer .click( function(){ 
containerBox.hide(); 
jQuery(this).remove(); 
}); 
}); >

Haha, ist das nicht ganz einfach, aber hier gibt es einen großen Fehler. IE6 unterstützt keine transparente Hintergrundfarbe. Daher wird unter der Anzeige von IE6 ein großes Stück schwarzer Scheiße erscheinen ~ 

Jetzt reden wir über 
Verwendung: 


Schritt eins: Zitieren Sie die JQuery-Datei. Gehen Sie nicht weiter darauf ein. http://jquery.com 

Schritt 2: Referenzieren Sie mein Plug-in, ich werde nicht viel dazu sagen, 
Zum Herunterladen klicken

,

Schritt 3: Schauen Sie, den Inhalt, den Sie im mittleren Feld anzeigen möchten, kann ich nicht für Sie implementieren. Sie müssen also selbst einen erstellen und ihn unten auf der Webseite platzieren,
z. B.:

Kopieren Sie den Code
Der Code lautet wie folgt:

🎜>Schritt 4: Fügen Sie das Inhaltsfeld an der Stelle hinzu, an der es angezeigt werden soll. Klicken Sie als Beispiel:

Code kopieren

Der Code lautet wie folgt:

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

Du bist fertig!

Hinweis: Dieses Plug-in blendet die Popup-Ebene automatisch aus, wenn Sie auf den grauen Bereich klicken. Wenn Sie eine Schließen-Schaltfläche hinzufügen und diese dann ausblenden möchten, können Sie das Schließereignis selbst schreiben.

Verwandte Etiketten：

弹出层遮罩层

Quelle：php.cn

Vorheriger Artikel：jquery simuliert die HTML-Datei der LCD-Uhr mit dem Quellcode_jquery Nächster Artikel：Beispiel für eine lokale Vorschau vor dem Hochladen von Javascript-Bildern_Javascript-Kenntnisse

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors