Question

是否可以将特定div中的外部内容加载到Bootstrap 3.3.x模式中？

这是我的设置：

第1页= mywebsite.com/doctors，这将打开模态。

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

我可以将#bio中的内容加载到第1页的模式中吗？

我已经找到了将完整的外部页面加载到模态中的信息，但我真的只需要加载来自特定div的内容。

我拼凑了一些ajax用于加载特定元素，但我不确定如何将它与bootstrap模式集成（或者如果它甚至是最好的方法）。

$.ajax({
    url: 'mywebsite.com/doctors/john-doe',
    dataType: 'html',
    success: function(html) {
        var div = $('#bio', $(html)).addClass('done');
        $('.modal-content').html(div);
    }
});

感谢您的帮助。

Answer 1

您可以使用.load()

加载页面碎片

与.load()不同，$.get()方法允许我们指定一部分   要插入的远程文档。这是通过特殊的方式实现的   url参数的语法。如果有一个或多个空格字符   包含在字符串中，第一个字符串后面的字符串部分   假设space是一个确定内容的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`
});

Answer 2

我认为你正走在正确的道路上。

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

Bootstrap modal dialog 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">&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。

在bootstrap 3模态

2 个答案:

部分内容