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 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 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写杨辉三角实例代码
2011/07/17 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
西部世纪.net笔试题面试题
2014/04/03 面试题
高中自我评价范文
2014/01/27 职场文书
差生评语大全
2014/05/04 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
研究生个人学年总结
2015/02/14 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers