Startseite>Webdesign-Tutorial>WEB-Standardisierung

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Vollbildabschirmung, automatisch zentrierende LightBox</title>
<style type="text/css">
* { margin:0; padding:0 }
html,body { height:100%; overflow:hidden; font:12px/1.5 simsun;}
.myPage { line-height:3; overflow:auto; width:100%;}
.lightBox,
.popupCover,
.popupIframe,
.popupComponent { position:absolute; top:0; width:100%;}
.popupComponent { z-index:2; display:none;}
.popupIframe { display:none; _display:block; _filter:alpha(opacity=0);}
.popupCover {background:#000; opacity:0.7; *filter:alpha(opacity=70);}
.lightBox { text-align:center; overflow:auto;}
.lightBoxContent { display:inline-block; *display:inline; zoom:1; width:10px; border:5px solid #00b4ff;}
.lightBoxMaxHeight { display:inline-block; height:100%; width:1px:-1px;}
.lightBoxWrapper { display:inline-block; *display:inline:1;
.lightBoxClose { color:#f00;}
.lightBoxSubmit { margin-top:10px; padding-top:5px; border-top:1px solid #ccc;}
.lightBoxSubmit input {font-size:12px; padding:0 10px;}
</style>
</head>
<Körper>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
Der Text wird zentriert, wenn die Eingabeaufforderung kleiner als eine Zeile ist<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat. Wenn der Inhalt die Höhe eines Bildschirms überschritten hat.<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox2')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="myPage">
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
<div style="text-align:center;"><input type="button" value="Schaltfläche auf dem ersten Bildschirm" onclick="showLayer('lightBox')" /></div>
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
<select><option>Eine Auswahl, mit der getestet wird, ob sie in IE6 abgedeckt werden kann</option></select><br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
<select><option>Eine weitere Auswahl zum Testen, ob sie in IE6 abgedeckt werden kann</option></select><br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
<div style="text-align:center;"><input type="button" value="Schaltfläche im zweiten Bildschirm" onclick="showLayer('lightBox')" /><input type="button" value ="Wenn der Inhalt die Höhe eines Bildschirms überschritten hat" onclick="showLayer('lightBox2')" /></div>
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
</div>
<Skript>
Funktion showLayer(id) {
document.getElementById(id).style.display = "block";
}
Funktion hideLayer(id) {
document.getElementById(id).style.display = "none";
}
</script>
</body>
</html>

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

  1. 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.
  2. Die Höhe der lightBox passt sich dem Inhalt an und wirkt perfekt zentriert.
  3. 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Methode der Vollbildmaskierung</title>
<style type="text/css">
* {
margin:0; padding:0; /*--- Einfaches CSS-Reset, es heißt, es sei nicht effizient, bitte durch ein effizientes ersetzen---*/
}
html,body {
height:100%; /*--- Mit dieser Höhe ist es unter IE6 effektiv, height:100% für das Unterobjekt des Körpers festzulegen---*/
overflow:hidden; /*--- Töte die von HTML oder Body generierte Bildlaufleiste---*/
}
.Seite {
Zeilenhöhe:3;
overflow:auto; /*--- Die Bildlaufleiste hängt davon ab---*/
width:600px; height:400px; background:#f60; /*--- Machen wir es erst einmal so groß, damit jeder es klar sehen kann---*/
position:relative; left:50px; top:50px; /*--- Verschieben Sie es ein wenig, damit jeder es klar sehen kann, und der grundlegende Effekt der Maske wird erreicht---*/
}
.Abdeckung {
Position:absolut;
Breite:600px; Höhe:400px; Hintergrund:#000;
Deckkraft:0,7; *filter:alpha(opazität=70);
Z-Index:2;
}
</style>
</head>
<Körper>
<div class="cover"></div>
<div class="page">
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />Vorgeben, reich an Inhalten zu sein<br />
</div>
</body>
</html>

Ähnliche Artikel