正如你所看到的这里,我有一个按钮可以启动一个模态。为这个按钮设置一个href网址,这个网址会被Bootstrap 3自动加载到模态中。 事实上,这个页面被加载到了模态根部(正如bootstrap 3模态使用文档中所说)。我想把它加载到modal-body中。
有什么方法可以通过属性(而不是javascript)来实现吗?或者什么是最自动的方法?
P.S. 我记得在Bootstrap 2中,内容是在body中加载的,而不是在root中。
这实际上是非常简单的,只需添加一点点的javascript。链接的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>
自己试试:
我猜你是在寻找这个自定义函数。它接收一个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 -->