JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

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

-Layer handelt) über diese abdunkelnde Ebene in die Mitte legen, um den Benutzer darauf aufmerksam zu machen (siehe Figure 13-6 ). Man kann unterschiedlichste Arten von Inhalten anzeigen, auch Bilder, per Ajax geladene HTML-Fragmente und Markup aus der Seite.
Figure 13-6. Ein modales Fenster, erstellt mit jQuery
Modales Fenster – HTML-Code
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery-Kochbuch - Kapitel 13 - Ein einfaches modales Fenster anzeigen

|
|
| .

     Dieser Inhalt wird in das modale Fenster kopiert werden,
     wenn sein Anker das Ziel ist.

Viele Zeilenumbrüche, um scrollende Inhalte zu simulieren ...

It's the end of the world, as we know it, and I feel fine.

    Modales Fenster – jQuery-Code
// Initialisieren
function init_modal() {

// Ist das Element vorhanden?
if (!$('a.modal').length) {

    // Wenn nicht, beenden
    return;
}

// IE6 erkennen (Boolean).
var $IE6 = typeof document.addEventListener !== 'function' && !window.XMLHttpRequest;

// Ein bisschen rechnen
function sizeModal() {

    // Dimensionen des Fensters
    var $modal = $('#modal_window');
    var $modal_width = $modal.outerWidth();
    var $modal_height = $modal.outerHeight();
    var $modal_top = '-' + Math.floor($modal_height / 2) + 'px';
    var $modal_left = '-' + Math.floor($modal_width / 2) + 'px';

    // Modales Fenster anzeigen
    $('#modal_window').css('margin-top', $modal_top)
     .css('margin-left', $modal_left);
}

/* Für den IE6 */
function positionModal() {
    // Position erzwingen
    $('#modal_wrapper').css('top', $(document).scrollTop() + 'px');
}

// Fenster anzeigen
function showModal() {
    if ($IE6) {