Gördüğünüz gibi burada, bir modal başlatan bir düğmem var. Düğme için bir href url ayarlayarak bu url'nin Bootstrap 3 tarafından otomatik olarak modala yüklenmesini sağladım. Gerçek şu ki, bu sayfa modal köküne yüklenir (bootstrap 3 modal kullanımı belgesinde belirtildiği gibi). Ben bunun yerine modal-gövdeye yüklemek istiyorum.
Bunu öznitelikler (javascript değil) aracılığıyla yapmanın bir yolu var mı? Ya da bunu yapmanın en otomatik yolu nedir?
Not: Bootstrap 2'de içeriğin köke değil gövdeye yüklendiğini hatırlıyorum.
Bu aslında birazcık eklenmiş javascript ile süper basittir. Bağlantı'nın href'i ajax içerik kaynağı olarak kullanılır. Bootstrap 3.* için kullanımdan kaldırılmış Bootstrap yükleme işlevini devre dışı bırakmak için data-remote="false"
ayarını yaptığımızı unutmayın.
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 (resmi örnek temel alınarak):
<!-- 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>
Kendiniz deneyin:
Bu SO yanıtını](https://stackoverflow.com/questions/18378720/bootstrap-3-with-remote-modal) kontrol edin.
Tek yol, ajax yanıtınızla tüm modal yapıyı sağlamak gibi görünüyor.
Bootstrap kaynak kodu adresinden kontrol edebileceğiniz gibi, yükleme işlevi kök öğeye bağlanmıştır.
Ajax yanıtını değiştiremiyorsanız, basit bir geçici çözüm, muhtemelen kök öğenin göster / gizle işlevlerini bozacak olsa da, body öğenizde $(..).modal(..)
eklentisini açık bir şekilde çağırmak olabilir.
Sanırım bu özel işlevi arıyorsunuz. Bir data-toggle niteliği alır ve uzak içeriği yerleştirmek için gerekli div'i dinamik olarak oluşturur. AJAX aracılığıyla yüklemek istediğiniz herhangi bir bağlantıya data-toggle="ajaxModal" yerleştirmeniz yeterlidir.
JS kısmı:
$('[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);
}
);
Son olarak, uzak içerikte, tüm yapıyı işe koymanız gerekir.
<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 -->