Overlay mit CSS

Mit einer Lichtbox (Lightbox) ist es üblich, dass sich, während man das Fenster öffnet, der Rest der Webseite abdunkelt. Wie man dieses Abdunkel mit CSS erreichen kann, möchte ich an dieser Stelle vorstellen.

Den Effekt des Abdunkels realisiert man auschließlich mit CSS. Das Auslösen des Abdunklungseffekt wird mittels einfachem JS realisiert.

Damit wir die gesamte Website verdunkeln können, benötigen wir ein Element, dass sich über die komplette Seite legen kann. Für dieses Element werden wir am besten ein DIV. Dieses DIV bekommt die ID "#overlay" mit folgenden Eigenschaften:

  1. #overlay {
  2.    position: fixed;
  3.    z-index:199;
  4.    top: 0px;
  5.    left: 0px;
  6.    height:100%;
  7.    width:100%;
  8. }

Der z-index ist freiwählbar und sollte höher sein, als der höchste z-index von der Rest der Webseite, damit alles abgedeckt werden kann. Setzt man dieses nicht richtig, so werden einige Elemente weiterhin nicht abgedunkelt. Da ältere Browser wie der IE 6 mit der Anweisung position: fixed nicht zurecht kommen, müssen wir noch für den 6er einige separate Anweisungen schreiben.

  1. * html #overlay { /* ie6 hack */
  2.    position: absolute;
  3.    height: expression(document.body.scrollHeight > document.body.
  4.     offsetHeight ? document.body.scrollHeight : document.body.
  5.     offsetHeight + 'px');
  6. }

Bis jetzt haben wir nur ein leeres DIV definiert. Damit wir Die Webseite abdunkeln können, müssen wir jetzt mit Transparenzen arbeiten. Hierfür verwenden wir einfach eine Klasse, die als Hintergrundfarbe Schwarz hat und setzten die Transparenz auf einen Wert kleiner als 1 bzw. 100. Da die Browser unterschiedlich arbeiten, wird an dieser Stelle mehr als eine Tranparenz-Anweisung benötigt. Die Klasse sieht wie folgt aus:

  1. .overlayBG {
  2.    background-color:#000;
  3.    -ms-filter: "Alpha(Opacity=75)"; /* IE 8 */
  4.    filter:alpha(opacity=75); /* IE5-7 */
  5.    -moz-opacity: 0.75; /* Mozilla */
  6.    opacity: 0.75;
  7. }

Jetzt benötigen wir nur noch ein JS, dass das DIV in die Webseite einbindet, wenn man auch ein bestimmtes Element klickt. Dieses JS sieht wie folgt aus:

  1. function overlay(mode) {
  2.    if(mode == 'display') {
  3.        if(document.getElementById("overlay") === null) {
  4.            div = document.createElement("div");
  5.            div.setAttribute('id', 'overlay');
  6.            div.setAttribute('className', 'overlayBG');
  7.            div.setAttribute('class', 'overlayBG');
  8.            document.getElementsByTagName("body")[0].appendChild(div);
  9.        }
  10.    } else {
  11.        document.getElementsByTagName("body")[0].removeChild(document.
  12.          getElementById("overlay"));
  13.    }
  14. }

Und schon können wir die Webseite auf Anweisung abdunkeln.

Möchte man jetzt noch den Lichtbox dazu haben, müssen wir einfach eine weitere ID in CSS erzeugen, die dann einem DIV gegeben wird, dass dann ebenfalls eingebunden wird.

  1. #lightBox {
  2.    position:fixed;
  3.    top:50%;
  4.    left:50%;
  5.    margin-left:-100px;
  6.    margin-top:-100px;
  7.    z-index:200;
  8.    width:200px;
  9.    height:200px;
  10.    background-color:#fff;
  11.    text-align:center;
  12. }

Für den IE 6 benötigen wir mal wieder eine separate Anweisung.

  1. * html #lightBox { /* ie6 hack */
  2.    position: absolute;
  3.    margin-top: expression(0 - parseInt(this.offsetHeight / 2) +
  4.      (TBWindowMargin = document.documentElement &&
  5.      document.documentElement.scrollTop ||
  6.      document.body.scrollTop) + 'px');
  7. }

Files