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 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
javascript基本算法汇总
Mar 09 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
收藏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
Terran兵种介绍
2020/03/14 星际争霸
使用php计算排列组合的方法
2013/11/13 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
Cookie 小记
2010/04/01 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
Java面试笔试题大全
2016/11/23 面试题
户外拓展活动方案
2014/02/11 职场文书
上海世博会口号
2014/06/19 职场文书
收银员岗位职责
2015/02/03 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL