Tutorial "Scheinfenster"
Einleitung
Hallo, dieses Tutorial soll zeigen, wie man ein Scheinfenster in jede oder eher gesagt über jede Seite macht. Zweck dieses Ganzen ist die Befreiung von fancybox...
Da mich letztens jemand darauf angesprochen hat und ich es ihm erklären sollte, ist hier jetzt meine Antwort.
Schritt 1: Hintergrund
Bei den meisten Seiten ist es so, dass der Rest der Seite abgedunkelt wird. Hierfür kann man sich am Besten mit Gimp oder PS ein transparentes Bild erstellen, welches wie dieses aussehen könnte:
[attachment=1]<!-- ia1 -->fixarea_bg.png<!-- ia1 -->[/attachment]
Schritt 2: HTML-Code
Jetzt müssen wir 2 DIV-Container anlegen. Das sollte dann folgendermaßen aussehen:
Der DIV-Bereich "window" wird einfach nur die komplette Seite füllen und das transparente Hintergundbild haben. Der DIV-Bereich "page" beinhaltet den Inhalt und wird einfach einen weißen Hintergund haben.
Schritt 2: CSS
Um nun die letzten beiden Sätze des vorherigen Schrittes umzusetzen, brauchen wir folgenden CSS Code:
div#window {
position: fixed;
width: 100%;
height: 100%;
background-image: url(fixarea_bg.png); //das transparente BG-Bild
}
div#page {
height: 400px;
width: 800px;
position: fixed;
background-color: white;
margin: 20px 30px 20px 200px;
}
Alles anzeigen
Die Angaben für "page" sind natürlich Dir überlassen.
Ich hoffe, dieses Tutorial ist hilfreich und lässt auch abwenden von fancybox...
Das Ergebnis
[attachment=0]<!-- ia0 -->Unbenannt.PNG<!-- ia0 -->[/attachment]
Eine kleine Ergänzung
Um das zu Fenster dynamisch zu öffnen und zu schließen, müsste man Javascript verwenden. Da das hier das falsche Bereich dafür wäre, mache ich es später im richtigen.
MfG
Philipp E.