Wie Sie sehen können hier, habe ich eine Schaltfläche, die ein Modal startet. Einstellen einer href url für die Schaltfläche diese url wird automatisch in modal von Bootstrap 3 geladen. Tatsache ist, dass diese Seite in das Modal-Root geladen wird (wie in der Bootstrap 3 Dokumentation für die Verwendung von Modals beschrieben). Ich möchte es stattdessen in den Modal-Body laden.
Gibt es eine Möglichkeit, es über Attribute (nicht Javascript) zu tun? Oder was ist der automatischste Weg, es zu tun?
P.S. Ich erinnere mich in Bootstrap 2 der Inhalt wurde in den Körper geladen, nicht die Wurzel.
Dies ist eigentlich super einfach mit nur ein wenig hinzugefügt javascript. Der Link's href wird als die Ajax-Inhaltsquelle verwendet. Beachten Sie, dass für Bootstrap 3.* wir data-remote="false"
setzen, um die veraltete Bootstrap Ladefunktion zu deaktivieren.
JavaScript:
// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
Html (basierend auf dem offiziellen Beispiel):
<!-- Link trigger modal -->
<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
Launch Modal
</a>
<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Probieren Sie es selbst aus:
Überprüfen Sie [diese SO-Antwort] (https://stackoverflow.com/questions/18378720/bootstrap-3-with-remote-modal).
Es sieht aus wie der einzige Weg ist, um die gesamte modale Struktur mit Ihrer Ajax-Antwort bereitzustellen.
Wie Sie aus dem Bootstrap Quellcode überprüfen können, ist die Ladefunktion an das Root-Element gebunden.
Falls Sie die Ajax-Antwort nicht modifizieren können, könnte ein einfacher Workaround ein expliziter Aufruf des $(..).modal(..)
-Plugins auf Ihrem Body-Element sein, auch wenn dies wahrscheinlich die Show/Hide-Funktionen des Root-Elements unterbrechen wird.
Ich vermute, Sie suchen nach dieser benutzerdefinierten Funktion. Sie nimmt ein data-toggle-Attribut und erstellt dynamisch das notwendige div, um den entfernten Inhalt zu platzieren. Platzieren Sie einfach die data-toggle="ajaxModal" auf jeden Link, den Sie über AJAX laden möchten.
Der JS-Teil:
$('[data-toggle="ajaxModal"]').on('click',
function(e) {
$('#ajaxModal').remove();
e.preventDefault();
var $this = $(this)
, $remote = $this.data('remote') || $this.attr('href')
, $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
$('body').append($modal);
$modal.modal({backdrop: 'static', keyboard: false});
$modal.load($remote);
}
);
Schließlich müssen Sie im Remote-Inhalt die gesamte Struktur zum Laufen bringen.
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Button</a>
<a href="#" class="btn btn-primary">Another button...</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->