Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法


Posted in Javascript onJuly 09, 2017

摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题。

1. Bootstrap 模态对话框和简单使用

<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>

显示效果与下图相似:

Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

可以使用按钮或链接直接调用模态对话框,这是简单的用法:

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button>
<a href="#myModal" rel="external nofollow" role="button" class="btn" data-toggle="modal">打开对话框</button>

这样只能把静态内容在对话框中显示出来,使用对话框的 remote 选项可以实现更强大的效果。

2. 使用 remote 选项让模态对话框加载页面到 .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"
});

这段脚本的效果和使用链接是一样的,当这段脚本执行后,page.jsp 的内容会被加载到对话框的 .modal-body 中,随即显示对话框。

这两种方法的背后,都是 Bootstrap 调用了 jQuery 的 load() 方法,从服务器端加载了 page.jsp 页面。但这个加载只会发生一次,后面不管你点击几次链接,或者执行几次脚本,哪怕改变传递给 remote 选项的值,对话框都不会重新加载页面,这真是个让人头疼的事情。不过问题还是能够解决的。

3. 移除数据,让对话框能够在每次打开时重新加载页面

在搜索并查阅了相关文档后,发现在对话框的 hidden 事件里写上一条语句就可以了:

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

也可以在每次打开对话框之前移除数据,效果是一样的。

注:上面的代码基于 Bootstrap v2,如果使用 Bootstrape v3,模态对话框的 HTML 和事件的写法有一些不同,例如对于上面的 hidden 事件,要写成:

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

以上所述是小编给大家介绍的Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
为什么node.js不适合大型项目
Apr 28 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 #Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 #Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 #Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 #Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 #jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 #jQuery
详谈javascript精度问题与调整
Jul 08 #Javascript
You might like
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python: 传递列表副本方式
2019/12/19 Python
python Pexpect模块的使用
2020/12/25 Python
怎样写好自我鉴定
2013/12/04 职场文书
服装设计专业求职信
2014/06/16 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
工作表扬信范文
2015/01/17 职场文书
五一晚会主持词
2015/07/01 职场文书