快捷導(dǎo)航

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

更新時間：2017年01月27日 11:06:01 作者：小柯丶尚好

本篇文章主要介紹了詳解bootstrap的modal-remote兩種加載方式【強化】，具有一定的參考價值，有興趣的可以了解一下。

方法一：

使用鏈接

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

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

方法二：

使用腳本

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

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

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

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

問題來了：如果在請求的頁面中有$()加載事件加載比如boostrap-validator或者boostrap-fileinput等插件會出現(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ù)沒有被清除，可能是這個原因?qū)е碌倪@種現(xiàn)象，于是改成如下代碼：

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

如此這樣問題解決了！

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

您可能感興趣的文章: