方法一：

使用連結 <a href="demo.jsp" data-toggle="modal" data-target="#mymodal">開啟</a> 當點選該連線時，demo.jsp的內容就可以動態的載入到<div class="modal-content"></div>中。當然這裡的連線也可以是controller

方法二：

使用指令碼

$("#myModal").modal({  
    remote: "page.html"  
});  

但是這樣載入後，會有問題，modal資料只加載一次，如果要載入不同的資料，例如根據id查詢詳細資訊，modal的資料是不能更新的，即使傳的id值不同。其實解決辦法很簡單，只需要在載入下次資料前，將之前的載入的資料清除即可。 最簡單的方式就是監聽modal的hidden，當modal關閉時，即把資料清除即可:

//v2
$("#myModal").on("hidden", function() {  
    $(this).removeData("modal");  
});  
//v3
$("#myModal").on("hidden.bs.modal", function() {  
    $(this).removeData("bs.modal");
}); 

問題來了：如果在請求的頁面中有$()載入事件載入比如boostrap-validator或者boostrap-fileinput等外掛會出現奇怪的現象，第一次正常執行，關掉modal，第二次，$()的程式碼沒有執行，第三次能執行；經過反覆發現“hidden.bs.modal”監聽每次都執行了，但是載入到<div class="modal-content"></div>裡面的資料沒有被清除，可能是這個原因導致的這種現象，

$("#myModal").on("hidden.bs.modal", function() {  
    $(this).removeData("bs.modal");
    /*modal頁面載入$()錯誤,由於移除快取時載入到<div class="modal-content"></div>未移除的資料，手動移除載入的內容*/
    $(this).find(".modal-content").children().remove(); 
}); 

我現在就是這樣寫的確實有效！

在page.html頁面不要引用任的js或樣式檔案，所需的都在主頁面引用即可，因為載入後它就屬於主頁面，並且能讀取主頁面裡的引數啥的 轉載原文：https://blog.csdn.net/kewanjun_lcx/article/details/54748286