在引导3模式中加载特定外部内容
是否可以将外部内容从特定的div加载到引导3.3.xModal中？
这是我的装置：
第1页= mywebsite.com/doctors，它将打开模态。
第2页= mywebsite.com/doctors/john-doe，它有一个名为#bio的div。
我能否将内容从#bio加载到第1页的模式中？
我已经找到了将一个完整的外部页面加载到模型中的信息，但是我确实只需要从特定的div加载内容。
我拼凑了这段ajax来加载特定的元素，但我不知道如何将它与引导模式集成(或者这是否是最好的方法)。
$.ajax({
url: 'mywebsite.com/doctors/john-doe',
dataType: 'html',
success: function(html) {
var div = $('#bio', $(html)).addClass('done');
$('.modal-content').html(div);
}
});谢谢你的帮助。
回答 2
Stack Overflow用户
发布于 2016-06-20 18:25:01
您可以使用.load()
加载页面片段
.load()方法与$.get()不同，它允许我们指定要插入的远程文档的一部分。这是通过url参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定第一个空格后面的字符串部分是确定要加载的内容的jQuery选择器。 我们可以修改上面的示例，只使用获取的文档的一部分：$( "#result" ).load( "ajax/test.html #container" );
$(".modal-content").load("mywebsite.com/doctors/john-doe #bio"
, function(html, textStatus, jqxhr) {
// do stuff when `#bio` element at `mywebsite.com/doctors/john-doe`
// loaded as `html` of `.modal-content`
});Stack Overflow用户
发布于 2016-06-20 18:28:39
我觉得你走的路是对的。
您必须将从mywebsite.com/doctors/john-doe接收的ajax mywebsite.com/doctors/john-doe内容注入到对话框的modal-body中。
自举模态对话框 html结构：
<div class="modal fade" tabindex="-1" role="dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->因此，有一种方法是这样的：(1)使用加载旋转器打开对话框，(2)在成功的回调调用$('.modal-body').html中触发这个ajax请求(3)，用接收到的响应设置这个div内容。
部分内容
解析接收到的html内容的一个选项是将html放入jQuery构造函数中，比如var content = $(received_html);。然后，您可以用content.find('#myDiv');找到您想要的div。
https://stackoverflow.com/questions/37934530
复制
相似问题
Leadtools没有足够的内存
纱线MapReduce没有足够的内存
Malloc没有分配足够的内存
删除行没有足够的内存
图片图形用户界面C# (使用图片框)
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
