Bootstrap modal只加載一次數據的解決辦法(推薦)
更新時間：2017年11月24日 12:01:25 作者：曉風xy殘月
這篇文章主要介紹了Bootstrap modal只加載一次數據的解決辦法,以及bootstrap模態(tài)框的簡單使用，需要的朋友可以參考下
1. Bootstrap 模態(tài)對話框和簡單使用
<div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>對話框標題</h3> </div> <div class="modal-body"> <p>對話框主體</p> </div> <div class="modal-footer"> <a href="#" rel="external nofollow" rel="external nofollow" class="btn" data-dismiss="modal">取消</a> <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">確定</a> </div> </div>
可以使用按鈕或鏈接直接調用模態(tài)對話框，這是簡單的用法：
<button type="button" data-toggle="modal" data-target="#myModal">打開對話框</button> <a href="#myModal" rel="external nofollow" role="button" class="btn" data-toggle="modal">打開對話框</button>
2. 使用 remote 選項讓模態(tài)對話框加載頁面到 .modal-body 中
有兩種方法，一種是使用鏈接，另一種就是使用腳本。
2.1 使用鏈接
<a href="page.jsp" rel="external nofollow" data-toggle="modal" data-target="#myModal">打開對話框</a>
當點擊此鏈接時，page.jsp 的內容會被加載到對話框的 .modal-body 中，隨即顯示對話框。
2.2 使用腳本
$("#myModal").modal({
remote: "page.jsp"
});
這段腳本的效果和使用鏈接是一樣的，當這段腳本執(zhí)行后，page.jsp 的內容會被加載到對話框的 .modal-body 中，隨即顯示對話框。
這兩種方法的背后，都是 Bootstrap 調用了 jQuery 的 load() 方法，從服務器端加載了 page.jsp 頁面。但這個加載只會發(fā)生一次，后面不管你點擊幾次鏈接，或者執(zhí)行幾次腳本，哪怕改變傳遞給 remote 選項的值，對話框都不會重新加載頁面，這真是個讓人頭疼的事情。不過問題還是能夠解決的。
3. 移除數據，讓對話框能夠在每次打開時重新加載頁面
在搜索并查閱了相關文檔后，發(fā)現在對話框的 hidden 事件里寫上一條語句就可以了：
$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});
也可以在每次打開對話框之前移除數據，效果是一樣的。
注：上面的代碼基于 Bootstrap v2，如果使用 Bootstrape v3，模態(tài)對話框的 HTML 和事件的寫法有一些不同，例如對于上面的 hidden 事件，要寫成：
$("#myModal").on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");
});
總結
以上所述是小編給大家介紹的Bootstrap modal只加載一次數據的解決辦法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
擴展String功能方法...2006-09-09
這篇文章主要介紹了JS數組去重的常用4種方法,ES6的Set類數組去重,for循環(huán)嵌套for循環(huán),indexOf去重,利用filter需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細介紹了JS onkeypress兼容性的寫法，感興趣的小伙伴們可以參考一下2016-04-04
經常使用document.getElementById，但對于更詳細的細節(jié)可以參考下。2011-09-09
這篇文章主要介紹了小程序scroll-view安卓機隱藏橫向滾動條的實現詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了js微信掃描二維碼登錄網站技術原理,具有一定的參考價值，有需要的可以了解一下。2016-12-12
這篇文章主要為大家詳細介紹了bootstrap table使用入門基本用法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了DWR內存兼容及無法調用問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
去tx面試過幾次，基本都會考到數組去重。其實平時工作中幾乎不會用到，再者也沒認真去了解過，所以基本上每次面到這里都會露出很大的馬腳，面試自然也over了2011-05-05
這篇文章主要為大家詳細介紹了JS實現按比例縮小圖片寬高，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08