JQuery Kochbuch (German Edition)

sich eher das offizielle Tab-Widget von jQuery UI anschauen.

Ein einfaches modales Fenster anzeigen
    Problem
    Dadurch, dass Popup-Blocker in den Browsern immer mehr Verbreitung finden, kann man sich nicht mehr darauf verlassen, mit
window.open()
ein Dialogfenster erzeugen zu können. Stattdessen ist es sinnvoller, einen modalen Overlay für die aktuelle Seite zu erstellen, mit dem der Anwender interagieren oder den er schließen kann.
    Es gibt durchaus ein Dialog-Widget bei jQuery UI, das umfangreich konfiguriert und mit einem Theme/Skin versehen werden kann, damit es zu den anderen UI-Widgets passt. Ein Einsatzbeispiel finden Sie unter http://jqueryui.com/demos/dialog . Der Vorteil des offiziellen Widgets ist die ebenfalls offizielle Unterstützung durch die jQuery UI-Community und die Weiterentwicklung und schon jetzt vorhandene Robustheit. Ein potenzieller Nachteil ist die Menge an zusätzlichem Code, die erforderlich ist, wenn Sie eigentlich nur ein einfaches modales Fenster benötigen. Schauen Sie sich beide Varianten an und entscheiden Sie dann in Abhängigkeit von den Erfordernisse Ihres Projekts.
    ----
    Note
    Wenn Sie eine noch robustere Lösung benötigrn, die mit ganz unterschiedlichen Inhalten zurechtkommt und sogar für Bildergalerien gut einsetzbar ist, schauen Sie sich ThickBox an.Dabei handelt es sich um ein beliebtes jQuery-Addon, das von Cody Lindley geschrieben wurde (einem der Koautoren dieses Buches). Beispiele für seinen Einsatz finden Sie unter http://jquery.com/demo/thickbox/ .
    ----
    Lösung
    Mit jQuery können wir leicht die Höhe und Breite der verfügbaren Fläche im Browser ermitteln (den Viewport)und eine Ebene über die gesamte Seite legen, die sie »abdunkelt«. Per CSS-Positionierung können wir dann unser modales »Fenster« (bei dem es sich eigentlich nur um einen