Vollflächig abgeschirmte und automatisch zentrierte LightBox

Autor：Eve Cole Aktualisierungszeit：2009-07-27 17:14:47

[Am Test teilnehmende Browser: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[Betriebssystem: Windows]

Dieses Tutorial zielt darauf ab, den Stil und das Verhalten von LightBox zu trennen und die JS-Arbeit in verschiedenen Aspekten zu reduzieren (Vollbildmaskierung, Maskierungsauswahl in ie6, bidirektionale Zentrierung, höhenadaptive Inhalte usw.).

Zuerst der Code :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">

http://www.14px.com " title="Home" />
Vollbildabschirmung, automatisch zentrierende LightBox

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein

Funktion showLayer(id) {
document.getElementById(id).style.display = "block";
}
Funktion hideLayer(id) {
document.getElementById(id).style.display = "none";
}

Diese LightBox hat die folgenden Eigenschaften. Sie können sie testen, indem Sie den Code ^-^ ändern:

Durch Klicken auf eine beliebige Stelle auf der Seite kann der Bildschirm perfekt abgeschirmt werden (jedes Element, einschließlich der Bildlaufleiste, kann derzeit nicht direkt gesteuert werden). In IE6 kann das ausgewählte Element abgeschirmt werden, ohne es auszublenden (der Fehler der Iframe-Abschirmungsmethode: Nach der Abschirmung kann Wenn Sie die Bildlaufleiste ziehen, wird die Auswahl immer noch nach oben verschoben.
Die Höhe der lightBox passt sich dem Inhalt an und wirkt perfekt zentriert.
Wenn der Inhalt einzeilig ist, wird er in der Mitte angezeigt. Wenn der Inhalt mehrzeilig ist, wird er links angezeigt. Wenn die Höhe des Inhalts die Bildschirmhöhe überschreitet, wird eine Bildlaufleiste angezeigt und oben angezeigt, damit die Leser es vollständig lesen können.

Wenn Sie interessiert sind, stehen Ihnen die folgenden Tipps, aus denen diese LightBox besteht, als Referenz zur Verfügung:

1. Vollbild-Maskierungsmethode:

A. Blenden Sie die Bildlaufleiste von html/body aus.
B. Verwenden Sie ein Div als Maske und verwenden Sie dann ein anderes Div, um eine Seite mit Bildlaufleisten zu erstellen, eine oben und eine unten.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">

http://www.14px.com " title="Home" />
Methode der Vollbildmaskierung

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein

Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein
Vorgeben, reich an Inhalten zu sein