Forgot your password?

Forgot your username?

All about IT, Web and Development.
By users for users.

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.

Michael Kostka

Fachinformatiker / Systemintegration
Ich schreibe hier regelmäßig zu den Themen Android, Web, Linux und Hardware.

Raspberry Pi Starter Kit
DataCloud

Leave a comment

I have read the privacy policy and agree to electronically store and process my input data to answer the request.