快捷導(dǎo)航

詳解bootstrap的modal-remote兩種加載方式【強(qiáng)化】

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

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

方法一：

使用鏈接

<a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打開(kāi)</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ì)有問(wèn)題，modal數(shù)據(jù)只加載一次，如果要加載不同的數(shù)據(jù)，例如根據(jù)id查詢?cè)敿?xì)信息，modal的數(shù)據(jù)是不能更新的，即使傳的id值不同。其實(shí)解決辦法很簡(jiǎn)單，只需要在加載下次數(shù)據(jù)前，將之前的加載的數(shù)據(jù)清除即可。

最簡(jiǎn)單的方式就是監(jiān)聽(tīng)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"); 
});

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

$("#myModal").on("hidden.bs.modal", function() {  
  $(this).removeData("bs.modal"); 
  /*modal頁(yè)面加載$()錯(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();  
});

如此這樣問(wèn)題解決了！

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

您可能感興趣的文章: