bootstrap Tipps

Bootstrap Tipps

Modal

Modal ist auch ein sehr beliebtes Bootstrap Element. Es ist eine Art Fenster oder Ebene, welche(s) sich über die Seite legt und Inhalte aus irgendeiner Quelle anzeigt. Man nutzt es für Bildergalerien, Login Menüs und Infos etc.

Ein Modal wird von einem Div mit entsprechenden Klassen und einer id definiert und folgendermaßen aufgerufen:

<a href="#meinModal" data-toggle="modal">Show the Modal</a>

Show the Modal

Ein Modal kann aus drei Bereichen bestehen dem Header, Body, Footer.

Es folgt der Quelltext für das Modal

 <div class="modal fade" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="meinModalLabel">Modal Header Überschrift</h4>
      </div>

      <div class="modal-body">
        Der Modal-Body Bereich.
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
      </div>

    </div>
  </div>
</div>

Größen

Zusätzlich zum Standard Modal kann man 2 Größen definieren und zwar im <div class="modal-dialog">kann man zusätzlich eine der beiden Klassen zuweisen: modal-sm, modal-lg

Optionen

Mit Javascript kann man Optionen zuweisen, bis hin zu selbst definierten Funkionen, die beispielsweise nach Schließen des Modals ausgeführt werden.

Um ein Modal mit der id "myModal" anzusprechen genügt folgendes Javascript.

$('#myModal').modal(Optionen);

Ein Beispiel: die Option backdrop ist ein boolscher Wert, der den Hintergrund einblendet oder ausblendet.

  <script>
      $('#myModal').modal({backdrop: false});
      </script>

Man kann ein Modal auch über Javascript aufrufen. Im folgenden Beispiel mit der Option remote (siehe unten)

<a href="javascript:;" onClick="$('#myModal2').modal({remote: 'index.htm'});">Click me</a>

Optionen kann man auch über data-attributes übergeben:

data-backdrop="false"

<a href="#myModal1" data-toggle="modal" data-backdrop="false">Show the Modal</a>

Weitere Optionen:

Name	Typ	Standardwert	Info
backdrop	boolean	true	Fügt eine Hintergrundklickfläche zum Modal hinzu. Alternativ kannst du mit static zwar den Hintergrund abdunkeln aber das Schließen durch Klicken darauf verhindern.
keyboard	boolean	true	Modal lässt sich mit escape Taste schließen
show	boolean	true	Zeigt das Modal bei der Initialisierung
remote	path	false	Mit der jQuery load Methode kann man URL content in den Modal Body laden.

Alternativ kann man auch folgenermaßen eine Url in das Modal laden.

<a data-toggle="modal" href="loremIpsum.htm" data-target="#myModal2">Show Modal</a>

Click Me to show Modal

Events

Folgende Events werden ausgeführt wenn:

show	wenn die show Methode aufgerufen wurde
shown	wenn das Modal für den User sichtbar ist
hide	wenn die hide Methode aufgerufen wurde
hidden	wenn es für den User unsichtbar geworden ist

Es folgt ein Beispiel, bei dem ein Alert Fenster aufgerufen wird, nachdem das Modal unsichtbar geworden ist. Methode: hidden.

 <script>
        
$('#myModal1').on('hidden',function(){

alert('Hallo Modal');

}) 

</script>