JQuery Kochbuch (German Edition)

    
    
    
');

// Modale Links selektieren
$('a.modal').click(function() {

    // href="..." auswerten
    var $the_link = $(this).attr('href');

    // Link-Target bestimmen
    if ($the_link.match(/^#./)) {

     // #Anker-Inhalt
     $('#modal_content').html($($(this).attr('href')).html());
     showModal();

    } else if ($the_link.match(/.jpg$/) ||
     $the_link.match(/.png$/) ||
     $the_link.match(/.gif$/)) {

     // Bild
     $('#modal_content').html('
    

    
    

     ');
     showModal();

    } else {

     // externer Ajax-Inhalt
     $('#modal_content').load($(this).attr('href')
     .replace('#', ' #'), '', showModal);
    }

    // Modalen Titel bestimmen
    if ($(this).attr('title')) {

     // Titel einfügen
     $('#modal_bar strong').html($(this).attr('title'));

    } else if ($(this).html() !== '') {

     // Link-Text einfügen
     $('#modal_bar strong').html($(this).html());
    }

    // Nicht folgen
    this.blur();
    return false;
});

// Modale Elemente verbergen
$('#modal_overlay, #modal_close').click(function() {

    // Modales Fenster verbergen
    $('#modal_wrapper').hide();

    // Verbergen, weil Bilder später geladen werden können
    $('#modal_window').css('visibility', 'hidden');

    // Bild-Listener lösen
    $('#modal_content img').each(function() {
     $(this).unbind();
    });

    // Modale Inhalte zerstören
    $('#modal_content').html('');

    // Modalen Titel zurücksetzen
    $('#modal_bar strong').html('Modal window');

    // Nicht folgen
    this.blur();
    return false;
});

// Auf Scrollen im IE6 lauschen
if ($IE6) {
    $(window).scroll(function() {
     if ($('#modal_wrapper').is(':visible')) {
     positionModal();
     }
    });
}
}

// Los geht's
$(document).ready(function() {
init_modal();
});
    Diskussion
    Unsere Lösung für ein modales Fenster startet mit der Definition einer Variablen, die als Boolescher Wert dient und angibt, ob es sich beim Browser um den Internet Explorer 6 handelt. Um das herauszufinden, führen wir zwei schnelle Tests durch. Nachdem wir wissen, dass wir es mit dem IE 6 zu tun haben, können wir damit die Funktionalität entsprechend anpassen. Und auch in dem dynamisch hinzugefügten Markup-Fragment haben wir einen Bedingungs-Kommentar eingefügt:

    Auf den ersten Blick mag das verwirrend erscheinen, denn wenn es sich beim Browser um den Internet Explorer 6 handelt, fügen wir so nur einen leeren
iframe
ein, der keinerlei Inhalt enthält. Der Grund dafür liegt darin, dass wir den IE 6 austricksen und jegliche

-Formelemente auf der Seite überdecken wollen. Ohne diesen Workaround würden alle

-Elemente auf der Seite »durchscheinen« und damit den Benuter außerordentlich verwirren.
    Als nächstes erstellen wir eine Funktion, die all die Berechnungen durchführt, die nötig sind, um das modale Fenster innerhalb des Anzeigebereichs zu zentrieren. Das ließe sich zwar alles per CSS mit fest angegebener Höhe und Breite erzielen, aber bei der hier dargelegten Vorgehensweise sind wir flexibler. Der Entwickler, der diesen JavaScript-Code implementiert, muss nur die Breite des modalen Fensters per CSS setzen und unsere Funktion kümmert sich um den Rest, wodurch sogar Inhalte mit variabler Höhe möglich sind.
    Die nächste Funktion ist nur für den Internet Explorer 6 gedacht und wird auch nur für ihn aufgerufen. Durch ihren Einsatz wird die fehlende CSS-Unterstützung für
position: fixed
umgangen. Bei allen anderen Browsern wird unser modales Fenster auch beim Scrollen eines langen Dokuments vertikal und horizontal zentriert bleiben. Im IE 6 allerdings müssen wir das Fenster explizit anweisen, seine Position beim Scrollen