Tutorial: "Scheinfenster"

Mit CSS3 kann man das ganze auch einfacher realisieren, dann klappt auch das mit dem dynamisch aus- und einklappen.

Wenn ich dazu ein wenig Zeit finde (spätestens morgen), werd ich das ganze mal als CSS3-Tutorial hier drunter schreiben.

Ein Beispiel des ganzen: http://soeren-thomas.de/ (unten rechts auf Login klicken).
Das Fenster ist komplett ohne JavaScript realisiert und funktioniert nicht im IE <= 8.

So, dann fang ich mal an:

Für diese Methode braucht man kein JavaScript, es funktioniert ausschließlich mit CSS3 und dementsprechend nicht in älteren Browsern.
Der Nachteil ist natürlich, dass auch kein IE8 (IE9 dagegen schon) unterstützt wird und somit viele Besucher quasi ausgeschlossen werden.

Diese Variante basiert hauptsächlich auf der CSS3 Pseudo-Klasse :target.
Diese bewirkt, dass, wenn per Link die Id des Elements ausgewählt ist (z.B. wenn die id background ist, wenn in der Url am Ende #background steht), der enthaltene CSS-Code "ausgeführt" wird.

Der HTML-Code besteht, wie Philipps Variante aus zwei Containern:

<div id="background">
    <div>
    <a href="#">Schließen</a>
    <!-- Inhalt des Fensters -->
    </div>
</div>
<p><a href="#background">Öffnen</a></p> <!-- Öffnet das Fenster -->

Der äußere Container ist für den halbdurchsichtigen Hintergrund, wofür keine Grafik benötigt wird und der innere zur Formatierung des eigentlichen Fensters.

Damit das ganze funktioniert, wird noch ein Link benötigt, welcher das Fenster öffnet (muss als Ziel die id des äußeren Containers haben, z.B. href="#background") und ein Link zum Schließen des Fensters innerhalb des Fensters (mit href="#").

Der CSS-Code sieht folgendermaßen aus:

#background {
    /* Der Hintergrund ist ein teiltransparentes schwarz */
    background-color: rgba(0,   0,    0,    .8);
                      /*   rot, grün, blau, transparenz */
    /* der Hintergrund verdeckt den kompletten Viewport */
    height: 100%;
    width: 100%;
    /* Damit die Position unabhängig vom Rest der Seite ist */
    position: fixed;
    /* am Anfang aus dem sichtbaren Bereich geschoben */
    left: -9999px;
    top: -9999px;
    /* damit sich der Hintergrund über die Seite legt */
    z-index: 5;
}
/* Wählt den direkt nachfolgenden div aus */
#background > div {
    background-color: #FFF;
    height: 300px;
    width: 500px;
    /* auch das Fenster selber soll sich unabhängig vom Rest der Seite anordnen */
    position: fixed;
    /* Die obere, linke Ecke wird in die Mitte des Viewports geschoben */
    left: 50%;
    top: 50%;
    /* Das Fenster wird um die halben Maße nach oben links geschoben, damit die Mitte auch in der Mitte des Viewports ist */
    margin-top: -150px;
    margin-left: -250px;
}
/* Wenn per Link ausgewählt */
#background:target {
    /* Der Hintergrund wird (mitsamt den untergeordneten Elementen, wie dem Fenster) wieder in den Viewport geschoben */
    left: 0;
    top: 0;
}

Sollte eigentlich alles ausreichend erklärt sein.

Das ist erstmal das wichtigste, um das ganze noch hübscher zu gestalten, kann man sich den CSS3-Transitions bedienen und den Einblendvorgang animieren.
Hierzu sind nur kleine Änderungen am CSS-Code erforderlich, als animierte Eigenschaft wird die Transparenz (opacity) genutzt, das Fenster wird vollständig durchsichtig in die Mitte geschoben und dann eingeblendet.

#background {
    /* ... */
    /* Element ist vollständig transparent */
    opacity: 0;
    /* Wenn opacity geändert wird, geschieht dies innerhalb von einer Sekunde */
   -moz-transition: opacity ease 1s;
     -o-transition: opacity ease 1s;
        transition: opacity ease 1s;
-webkit-transition: opacity ease 1s;
}
#background:target {
    /* Wird wieder eingeblendet */
    opacity: 1;
}

Mit dieser Methode kann man schöne Fenster alá fancybox gestalten, ohne irgendetwas mit JavaScript machen zu müssen.
Wenn ihr Fragen dazu habt, dann scheut euch nicht diese auch zu stellen.