Bootstrap 模态动态内容答案

【问题标题】：Bootstrap Modal Dynamic ContentBootstrap 模态动态内容
【发布时间】：2014-03-18 18:41:04
【问题描述】：

我需要一种方法来加载可以随时更改的动态内容。根据 Bootstrap 文档

&lt;a data-toggle="modal" href="remote.htm" data-target="#modal"&gt;Click me&lt;/a&gt;

正在使用 jQuery 的 .load 仅加载内容一次。它在 modal-content div 中注入内容。如前所述，此模式的内容可以在任何给定时间更改，因此我需要一种不同的方法。有什么想法吗？

TL;DR - 我正在寻找一种方法，该方法将在每次打开模式而不是一次（默认引导模式）时加载动态内容（远程）。

【问题讨论】：

【解决方案1】：

如果您的用户可以容忍延迟，请在节目事件发生时重新加载内容。

$('#modal').on('show.bs.modal', function(){
    $.get("remote.htm", function(data){
        $('#modal').find('.modal-content').html(data);
    })
})

根据需要添加错误处理和参数

【讨论】：

【解决方案2】：

您可以使用以下方法正确清除模态的缓存：

$('#your-modal').removeData('bs.modal');

见https://github.com/twbs/bootstrap/pull/7935#issuecomment-21166069
您可能希望在模态的 hidden.bs.modal 事件的事件处理程序中执行此操作。

虽然您最好使用客户端模板和一些自定义 JavaScript 来加载必要的数据，而不是首先使用 data-remote。尤其是自从 Bootstrap has deprecated the remote modal option.

【讨论】：

【解决方案3】：

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

变成：

<a href="javascript:$('#modal .modal-body').load('remote.html',function(e){$('#modal').modal('show');});">Click me</a>

【讨论】：

使用这种方式不会显示对话框，因为没有为 Object 类型定义方法 .modal。我尝试使用这个：将显示对话框，但内容只有在我点击图标时才会更新而不是整个按钮。