Bootstrap 3-如何通过AJAX在模式主体中加载内容？
正如您所看到的here，我有一个启动模式的按钮。为按钮设置href url此url会被Bootstrap 3自动加载到模式中。事实上，此页面会加载到模式根目录中(如bootstrap 3 documentation for modals usage中所述)。我想把它加载到模态主体中。
有没有办法通过属性(而不是javascript)做到这一点？或者，最自动的方式是什么？
附注:我记得在Bootstrap 2中，内容被加载到主体中，而不是根中。
回答 4
Stack Overflow用户
发布于 2013-11-28 07:33:37
看起来唯一的方法就是在ajax响应中提供整个模态结构。
正如您可以从引导source code中查看的那样，加载函数被绑定到根元素。
如果您不能修改ajax响应，一个简单的变通办法是在body元素上显式调用$(..).modal(..)插件，即使这可能会破坏根元素的显示/隐藏功能。
Stack Overflow用户
发布于 2014-12-31 17:00:10
这实际上非常简单，只需添加一点javascript。链接的href用作ajax内容源。请注意，对于Bootstrap 3.*，我们将data-remote="false"设置为禁用deprecated Bootstrap load function。
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 (基于the official example)：
<!-- 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>Stack Overflow用户
发布于 2014-05-02 01:50:11
我猜您正在搜索这个自定义函数。它接受一个数据切换属性，并动态地创建必要的div来放置远程内容。只需将数据切换=“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 -->https://stackoverflow.com/questions/19663555
复制相似问题