So verwenden Sie das JQuery-Popup-Layer-Plug-In ThickBox_jquery

Thickbox ist ein Plug-in für jQuery. Seine Funktion besteht darin, Dialogfelder und Webseitenfelder anzuzeigen, um die Benutzererfahrung angenehmer zu gestalten.
Haftungsausschluss: Dies ist nur eine persönliche Zusammenfassung.
Vorbereitungsarbeit: Sie benötigen drei Dateien: thickbox.js, thickbox.css, jquery.js, die von überall online heruntergeladen werden können

Spezifische Verwendung:

Schritt 1: Fügen Sie diese drei Dateien auf der Seite ein, auf der Sie Thickbox verwenden möchten

Code kopieren Der Code lautet wie folgt:

Der zweite Schritt: Im Allgemeinen besteht die einfache Verwendung darin, Stile zur -Beschriftung und zum Button hinzuzufügen: class=thickbox

Es gibt auch Aufrufe über Thickbox-Funktionen: wie tb_init(), tb_show(); siehe unten.

Mehrere verschiedene Verwendungsmöglichkeiten:

1. Klicken Sie, um das Bild anzuzeigen:

ok, das ist es
2. Klicken Sie auf die Schaltfläche oder den Link:

Code kopieren Der Code lautet wie folgt:

Versteckte modale Inhalte anzeigen.

Dies ist ein modales Dialogfeld.

Dies ist ein modales Dialogfeld.
       

Anweisungen: Fügen Sie „#TB_inline?height=300&width=400&“ zur -Schaltfläche hinzu, die Sie verwenden möchten. #TB_inline ist eine feste Verwendung von Thickbox. Höhe und Breite sind die Größenparameter für die Anzeige des Pops -up-Dialogfeld. InlineId ist die Bezeichnung oder Komponente, die Sie anzeigen möchten. Modal ist die Wahl zwischen Modus und nicht modal. Natürlich können Sie auch viele benutzerdefinierte Parameter akzeptieren 3. Im Allgemeinen ist die Seite, die in Projekten am häufigsten verwendet wird, die Seite, die das Formular lädt. Beispielsweise können wir das Hinzufügen und Bearbeiten auf derselben Listenseite vornehmen unten gezeigt:

Die Vorgehensweise ist dieselbe. Fügen Sie dem hinzugefügten Link den Thickbox-Stil hinzu:

Hinzufügen

Voraussetzung ist, dass Sie die Seite, die Sie anzeigen möchten (add.shtml), vorbereiten und dann die Größe angeben müssen, die Sie anzeigen möchten

Das Bearbeiten ist dasselbe: Extrahieren Sie zuerst die Originalinformationen und lassen Sie sie dann vom Benutzer ändern:

Derselbe Code:

Code kopieren Der Code lautet wie folgt:

Bearbeiten

4. Sie können Elemente, die Thickbox erfordern, selbst finden, anstatt Stile zu verwenden, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$(function() { tb_init("#PicList a[img]");});

5. Für Seiten, die über Ajax geladen werden, ist der Thickbox-Stil ungültig Führen Sie einfach den folgenden Code aus, nachdem AJAX den HTML-Code geladen und auf der Seite aktualisiert hat:

tb_init('.thickbox');

6. Benutzerdefinierter Funktionsaufruf:
Wenn Sie auf das Miniaturbild klicken, um das große Bild anzuzeigen, fügt die Miniaturbild-URL einfach s:
vor dem Suffix der großen Bild-URL hinzu.

Code kopieren Der Code lautet wie folgt:

$(function() {

$("#PicList img").click(function() {
tb_show("",this.src.substring(0,this.src.length-5) '.jpg',false);
});});

Wenn Sie außerdem andere Ereignisse verwenden möchten, können Sie den Klick auch auf das Ereignis ändern, das die Thickbox auslösen soll.

THICKBOX unterstützt die folgenden Browser:

Windows IE 6.0, Windows IE 7, Windows FF 2.0.0.6, Windows Opera 9.0, Macintosh Safari 2.0.4, Macintosh FF 2.0.0.6, Macintosh Opera 9.10... Aber meiner Erfahrung nach hat IE6 immer noch einige Probleme!