Bootstrap Modals mit Ajax und JQuery laden

Twitters Web Application Framework Bootstrap erfreut sich großer Beliebtheit. Wir haben bereits einige Projekte damit umgesetzt und sind von der Einfachheit und den universellen Einsatzmöglichkeiten beeindruckt.



Bestandteil einer jeden modernen Webapplikation sind auch die sogenannten Modals. Es handelt sich dabei um eine Art Fenster bzw. Popup, welches sich über die Seite legt.

HTML Code

Auf der Seite muss zunächst ein Container für das Modal angelegt werden. Hier ist es wichtig, dass dieser eine eindeutige ID besitzt.

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true"></div>

Die Zuordnung der Klassen hide und fade bewirken, dass das Modal beim Laden der Seite nicht sichtbar ist und später per Klick sanft eingeblendet wird.

Da wir den Inhalt per Ajax erst später nachladen, kann man sich die Option hide auch sparen.

Jetzt benötigen wir noch einen Button zum Auslösen des Modals.

<a data-toggle="modal" data-target="#modal" href="modal.php" class="btn btn-primary">Modal</a>

JQuery Code

Möchte man per Ajax nachgeladenen Content per JavaScript oder JQuery erfassen bzw. manipulieren muss als Handler für Events die .on() Funktion verwendet werden:

http://bugs.jquery.com/ticket/11203

 
$(document).ready(function(){
 
    $(document).on('hidden', "#modal", function(){
        $("#modal").removeData("modal");
    });
 
    $(document).on('click', "a[data-toggle=modal]", function(){
 
        var target = $(this).attr("href");
 
        $.get(target, function(data){
            $("#modal").html(data);
            $("#modal").modal("show");
        });
 
        return false;
 
    });
});
 

Der erste Block sorgt dafür, dass das Modal beim Schließen zurückgesetzt wird. Verwendet man mehrere Modals auf einer Seite wird andernfalls stets der Inhalt des zuvor angeklickten Modals angezeigt.
Im zweiten Block fügen wir dem zuvor definierten Button eine Funktion hinzu. Die Quelle des Modals kommt aus dem href Attribut des Links.

Der Link wird aufgerufen und der Inhalt in den Modal Container #modal eingefügt.

Modal Datei

Die Datei für unser Modal heißt in unserem Fall modal.php und hat den folgenden Inhalt.

<div class="modal-container">
 
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel">Modal</h3>
    </div>
 
    <div class="modal-body">
 
        <p>Bootstrap Modal mit Ajax und JQuery</p>
 
    </div>
 
    <div class="modal-footer">
        <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">OK</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
 
</div>

Parameter an Modal übergeben

Auf diese Weise können wir jetzt auch Parameter z.B. per GET an die Datei Modal.php übergeben. Hierzu ändern wir nur den Link ab.

<a data-toggle="modal" data-target="#modal" href="modal.php?user_id=1" class="btn btn-primary">Modal</a>

Bootstrap 3

Bootstrap 3 wurde vor kurzem veröffentlicht. Hier hat sich auch einiges im Bereich der Modals geändert.

Die hier beschriebene Vorgehensweise funktioniert auch mit Bootstrap 3.

Es muss lediglich der Aufbau der Modal Datei (modal.php) angepasst werden.

Fazit

Wie bei Bootstrap üblich ist die Einbindung von Modals sehr schnell möglich. Zusätzlich ist das gesamte Design einfach stimmig. Dennoch lässt die offizielle Doku noch einige Beispiele im Bereich der Modals offen.