Bootstrap模态动态内容

Question

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

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

正在使用jQuerys的 .load ，只加载内容一次。它将内容注入模态内容div中。如前所述，该模态的内容可以在任何给定时间改变，因此我需要一种不同的方法。有什么想法吗？

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

Answer 1

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

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

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

Answer 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 。

Answer 3

这家伙有一个肮脏但有效的解决方案：http://www.whiletrue.it/how-to-update-the-content-of-a-modal-in-twitter-bootstrap/

<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>