首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在引导3模式中加载特定外部内容

在引导3模式中加载特定外部内容
EN

Stack Overflow用户
提问于 2016-06-21 02:15:13
回答 2查看 1.2K关注 0票数 0

是否可以将外部内容从特定的div加载到引导3.3.xModal中?

这是我的装置:

第1页= mywebsite.com/doctors,它将打开模态。

第2页= mywebsite.com/doctors/john-doe,它有一个名为#bio的div。

我能否将内容从#bio加载到第1页的模式中?

我已经找到了将一个完整的外部页面加载到模型中的信息,但是我确实只需要从特定的div加载内容。

我拼凑了这段ajax来加载特定的元素,但我不知道如何将它与引导模式集成(或者这是否是最好的方法)。

代码语言:javascript
运行
复制
$.ajax({
    url: 'mywebsite.com/doctors/john-doe',
    dataType: 'html',
    success: function(html) {
        var div = $('#bio', $(html)).addClass('done');
        $('.modal-content').html(div);
    }
});

谢谢你的帮助。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-06-21 02:25:01

您可以使用.load()

加载页面片段 .load()方法与$.get()不同,它允许我们指定要插入的远程文档的一部分。这是通过url参数的特殊语法实现的。如果字符串中包含一个或多个空格字符,则假定第一个空格后面的字符串部分是确定要加载的内容的jQuery选择器。 我们可以修改上面的示例,只使用获取的文档的一部分: $( "#result" ).load( "ajax/test.html #container" );

代码语言:javascript
运行
复制
$(".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`
});
票数 0
EN

Stack Overflow用户

发布于 2016-06-21 02:28:39

我觉得你走的路是对的。

您必须将从mywebsite.com/doctors/john-doe接收的ajax mywebsite.com/doctors/john-doe内容注入到对话框的modal-body中。

自举模态对话框 html结构:

代码语言:javascript
运行
复制
<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">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37934530

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档