Bootstrap Modal mit remote Content befüllen

Bei Bootstrap gibt es die Möglichkeit eine Dialogboxen (Modals) für die Darstellung von Inhalten zu verwenden.

Den “Inhalt” kann man direkt beim Starten der Dialogbox aufrufen oder man lädt einfach eine bereits existierende Seite.

Der Aufruf ist relativ einfach. Den folgenden HTML Markup an “irgendwo” auf die Webseite plazieren.

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- hier kommt später der Content hin-->
        </div>
    </div>
</div>

Gestartet wird das ganze dann über einen Button oder HTML Link

<a href="http://your.server.com/inhalt.php" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Demo Modal</a>

Soweit so gut. Ein Nachteil hat das ganze. Es gibt keine Möglichkeit die Titelzeile der Dialogbox oder einen “Cancel” Button beim Aufruf mitzugeben. Der Inhalt wir ausschließlich von der entfernten Webseite gefüllt.

In meinem Fall wird der Inhalt allerdings nicht nur über das Modal angezeigt sondern auch direkt im Browser wenn der Browser kein Javascript verwendet. Dort möchte ich dann natürlich keine Buttons sehen wenn die Seite nicht aus dem Modal heraus angezeigt wird.

Der Ansatz den ich gewählt habe ist folgender. Da ich ja weiß, daß die Seite nur direkt angezeigt wird wenn kein Javascript erlaubt ist verwende ich einfach Javascript um die notwendigen Bootstrap Markup für Headline und Schliessen Knopf in die Seite zu platzieren.

In der Seite inhalt.php wird also am Anfang kurz nach dem Bodytag eine leere Klasse eingefügt. <div class="modalheader"> </div>

Und am Ende dann ein

<script type="text/javascript">
     $(document).ready(function addcopy() {
        $(".modalheader").html("<div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button><h4 class=\"modal-title\">Informationen</h4></div>");
  });
</script>

Für dann Fall das die Seite aus dem Model heraus aufgerufen wird (Javascript enabled) wird ein Header und ein “X” zum Schließen angezeigt. Und für den Fall das die Seite direkt (Javascript disabled) bleibt die Zeile leer