詳解bootstrap的modal-remote兩種載入方式【強化】，bootstrapmodal

詳解bootstrap的modal-remote兩種載入方式【強化】，bootstrapmodal

方法一：

使用連結

<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 style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的資料，手動移除載入的內容*/   $(this).find(".modal-content").children().remove();  });  

如此這樣問題解決了！

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。