方法一：

使用鏈接

<a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打開</a>

當(dāng)點(diǎn)擊該連接時(shí)，demo.jsp的內(nèi)容就可以動(dòng)態(tài)的加載到<div class="modal-content"></div>中。當(dāng)然這里的連接也可以是controller

方法二：

使用腳本

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

但是這樣加載后，會(huì)有問題，modal數(shù)據(jù)只加載一次，如果要加載不同的數(shù)據(jù)，例如根據(jù)id查詢詳細(xì)信息，modal的數(shù)據(jù)是不能更新的，即使傳的id值不同。其實(shí)解決辦法很簡單，只需要在加載下次數(shù)據(jù)前，將之前的加載的數(shù)據(jù)清除即可。

最簡單的方式就是監(jiān)聽modal的hidden，當(dāng)modal關(guān)閉時(shí)，即把數(shù)據(jù)清除即可：

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

問題來了：如果在請(qǐng)求的頁面中有$()加載事件加載比如boostrap-validator或者boostrap-fileinput等插件會(huì)出現(xiàn)奇怪的現(xiàn)象，第一次正常執(zhí)行，關(guān)掉modal，第二次，$()的代碼沒有執(zhí)行，第三次能執(zhí)行；經(jīng)過反復(fù)發(fā)現(xiàn)“hidden.bs.modal”監(jiān)聽每次都執(zhí)行了，但是加載到<div class="modal-content"></div>里面的數(shù)據(jù)沒有被清除，可能是這個(gè)原因?qū)е碌倪@種現(xiàn)象，于是改成如下代碼：

$("#myModal").on("hidden.bs.modal", function() {  
  $(this).removeData("bs.modal"); 
  /*modal頁面加載$()錯(cuò)誤,由于移除緩存時(shí)加載到<span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的數(shù)據(jù)，手動(dòng)移除加載的內(nèi)容*/ 
  $(this).find(".modal-content").children().remove();  
});  

如此這樣問題解決了！

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。