Bootstrap Modal – Multiple und Dynamisch

01 Okt 2016
by marc
Comments are closed

Als erstes benötigen wir einen Event für unser Bootstrap Modal. Im folgenden Beispiel sind einige Attribute auf die wir weiter eingehen müssen.

data-pophtml = ist die Bezeichnung der gewünschten HTML-Datei die den HTML- und Javascript-Code enthält, der für die weitere Verarbeitung und für unsere Bootstrap Modal nicht weiter relevant ist.

data-funct = ist die Javascript-Funktion, im Template von data-pophtml geladen wird, die nach dem Laden der Bootstrap Modal aufgerufen wird. Sie füllt evtl. noch Inhalte im Template die z.B. von einer Restful-Api kommen können.

data-getUrl = ist die Möglichkeit daten an data-func zugeben, die vorab, wie in diesen Fall, von einer RESTFul stammen.

data-toggle = Ist der Trigger der den Event aufruft und die Bootstrap Modal öffnet.

data-keyboard=“false“, data-backdrop=“static“ = Das sind Optionen für die Bootstrap Modal weitere Informationen entnehmt ihr hier: http://holdirbootstrap.de/javascript/#modals


//html

<a href=""
class="btn btn-xs btn-success" 
data-pophtml="p_anmeldung" 
data-funct="init" 
data-target="#ewumodal" 
data-getUrl="/kurse/info/anmeldung/300" 
data-toggle="modal" 
data-keyboard="false" 
data-backdrop="static" >Meine Modalbox</a>

//

Der Javascript-Teil sollte schon etwas Erfahrung mit jQuery voraussetzen und erklärt sich eigentlich auch von selbst.


//javascript

jQuery(document).on('click','[data-toggle*=modal]',function(){

        var ha = Math.floor(Date.now() / 1000);
        var modal = $('
<div class="modal fade" id="ewumodal'+ha+'" tabindex="-1" 
role="dialog" aria-hidden="true" 
aria-labelledby="ewumodalLabel"></div>

');

        var button = $(this)
        $( "body" ).append( modal );

        $('#ewumodal'+ha).on('show.bs.modal', function (event) {

        var buttonArray = new Array();
        buttonArray = button.data();

       if (button.data('pophtml')) {
        var cURL = "/popover/"+button.data('pophtml');
       } else {
        var cURL = 0;
       }
       var funct = button.data('funct');
       var y = {};

       for(z in buttonArray) {
        if (z.match('daten')) {
         y[z.replace('daten','').toLowerCase()]=buttonArray[z];
        }
       }

       $('#ewumodal'+ha).load(cURL, function(response, status) {
        if (funct!=undefined) {
         var fn = window[funct]
        if (typeof fn === "function") {
         fn(buttonArray);
        } else {
         $(modal).modal('hide')
        }
       }                 
      });

      $('#ewumodal'+ha).on('hidden.bs.modal', function (e) {
       $(this).removeData('bs.modal');
       $(this).empty();
       $(this).remove();
      });

    });

 $('#ewumodal'+ha).modal('show');

});

Bitte versteht, dass es sich hier um einen Lösungsansatz handelt und noch einen Feinschliff benötigt. Mit dieser Variante könnt ihr so viele Bootstrap Modal laden wie ihr möchtet. Jede eurer Bootstrap Modal-Boxen behält die Möglichkeit bei mit dem Server zu kommunizieren.

Viel Spaß damit!

EWU Software GmbH © 2017