Όπως μπορείτε να δείτε εδώ, έχω ένα κουμπί που εκκινεί ένα modal. Ορίζοντας ένα href url για το κουμπί αυτό το url φορτώνεται αυτόματα στο modal από το Bootstrap 3. Το γεγονός είναι ότι αυτή η σελίδα φορτώνεται στη ρίζα του modal (όπως αναφέρεται στην bootstrap 3 documentation for modals usage). Θέλω να τη φορτώσω στο modal-body αντ' αυτού.
Υπάρχει τρόπος να το κάνω μέσω χαρακτηριστικών (όχι javascript); Ή ποιος είναι ο πιο αυτόματος τρόπος για να το κάνω;
Υ.Γ. Θυμάμαι ότι στο Bootstrap 2 το περιεχόμενο φορτωνόταν στο σώμα, όχι στη ρίζα.
Αυτό είναι στην πραγματικότητα εξαιρετικά απλό με λίγη javascript. Ο σύνδεσμος's href χρησιμοποιείται ως πηγή περιεχομένου ajax. Σημειώστε ότι για το Bootstrap 3.* θέτουμε data-remote="false"
για να απενεργοποιήσουμε την απαρχαιωμένη λειτουργία φόρτωσης του Bootstrap.
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 (με βάση το επίσημο παράδειγμα):
<!-- 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>
Δοκιμάστε το μόνοι σας:
Ελέγξτε αυτή την απάντηση SO.
Φαίνεται ότι ο μόνος τρόπος είναι να παρέχετε ολόκληρη τη δομή του modal με την απόκριση ajax.
Όπως μπορείτε να ελέγξετε από το bootstrap πηγαίος κώδικας, η λειτουργία load είναι συνδεδεμένη με το στοιχείο root.
Σε περίπτωση που δεν μπορείτε να τροποποιήσετε την απόκριση ajax, μια απλή λύση θα μπορούσε να είναι μια ρητή κλήση του πρόσθετου $(...).modal(..)
στο στοιχείο body, παρόλο που πιθανώς θα σπάσει τις λειτουργίες show/hide του στοιχείου root.
Υποθέτω ότι ψάχνετε για αυτή την προσαρμοσμένη λειτουργία. Λαμβάνει ένα χαρακτηριστικό data-toggle και δημιουργεί δυναμικά το απαραίτητο div για την τοποθέτηση του απομακρυσμένου περιεχομένου. Απλά τοποθετήστε το data-toggle="ajaxModal" σε κάθε σύνδεσμο που θέλετε να φορτώσετε μέσω AJAX.
Το τμήμα JS:
$('[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);
}
);
Τέλος, στο απομακρυσμένο περιεχόμενο, πρέπει να βάλετε όλη τη δομή να λειτουργήσει.
<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 -->