方法一：
使用鏈接
<a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打開</a>
當點擊該連接時，demo.jsp的內容就可以動態的加載到<div class="modal-content"></div>中。當然這里的連接也可以是controller
方法二：
使用腳本
$("#myModal").modal({
remote: "page.jsp"
});
但是這樣加載后，會有問題，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頁面加載$()錯誤,由于移除緩存時加載到<span ><div class="modal-content"></div></span>未移除的數據，手動移除加載的內容*/
$(this).find(".modal-content").children().remove();
});
如此這樣問題解決了！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
