Bootstrap模態動態內容

Question

我需要一種方法來加載可隨時更改的動態內容。根據所述引導文件

<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

這傢伙有一個骯髒的，但工作液：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> 

Answer 3

可以正確清除模式的緩存使用：

$('#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。