Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载
http://my.oschina.net/qczhang/blog/190215
摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题。
目录[-]
- 1. Bootstrap 模态对话框和简单使用
- 2. 使用 remote 选项让模态对话框加载页面到 .modal-body 中
- 2.1 使用链接
- 2.2 使用脚本
- 3. 移除数据,让对话框能够在每次打开时重新加载页面
- 参考文档
1. Bootstrap 模态对话框和简单使用
01
|
< div id = "myModal" class = "modal hide fade" >
|
02
|
< div class = "modal-header" >
|
03
|
< button type = "button" class = "close" data-dismiss = "modal" >x</ button >
|
04
|
< h3 >对话框标题</ h3 >
|
05
|
</ div >
|
06
|
< div class = "modal-body" >
|
07
|
< p >对话框主体</ p >
|
08
|
</ div >
|
09
|
< div class = "modal-footer" >
|
10
|
< a href = "#" class = "btn" data-dismiss = "modal" >取消</ a >
|
11
|
< a href = "#" class = "btn btn-primary" data-dismiss = "modal" >确定</ a >
|
12
|
</ div >
|
13
|
</ div >
|
显示效果与下图相似:
可以使用按钮或链接直接调用模态对话框,这是简单的用法:
1
|
< button type = "button" data-toggle = "modal" data-target = "#myModal" >打开对话框</ button >
|
2
|
< a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" >打开对话框</ button >
|
这样只能把静态内容在对话框中显示出来,使用对话框的 remote 选项可以实现更强大的效果。
2. 使用 remote 选项让模态对话框加载页面到 .modal-body 中
有两种方法,一种是使用链接,另一种就是使用脚本。
2.1 使用链接
1
|
< a href = "page.jsp" data-toggle = "modal" data-target = "#myModal" >打开对话框</ a >
|
当点击此链接时,page.jsp 的内容会被加载到对话框的 .modal-body 中,随即显示对话框。
2.2 使用脚本
1
|
$( "#myModal" ).modal({
|
2
|
remote: "page.jsp"
|
3
|
});
|
这段脚本的效果和使用链接是一样的,当这段脚本执行后,page.jsp 的内容会被加载到对话框的 .modal-body 中,随即显示对话框。
这两种方法的背后,都是 Bootstrap 调用了 jQuery 的 load() 方法,从服务器端加载了 page.jsp 页面。但这个加载只会发生一次,后面不管你点击几次链接,或者执行几次脚本,哪怕改变传递给 remote 选项的值,对话框都不会重新加载页面,这真是个让人头疼的事情。不过问题还是能够解决的。
3. 移除数据,让对话框能够在每次打开时重新加载页面
在搜索并查阅了相关文档后,发现在对话框的 hidden 事件里写上一条语句就可以了:
1
|
$( "#myModal" ).on( "hidden" , function () {
|
2
|
$( this ).removeData( "modal" );
|
3
|
});
|
也可以在每次打开对话框之前移除数据,效果是一样的。
注:上面的代码基于 Bootstrap v2,如果使用 Bootstrape v3,模态对话框的 HTML 和事件的写法有一些不同,例如对于上面的 hidden 事件,要写成:
1
|
$( "#myModal" ).on( "hidden.bs.modal" , function () {
|
2
|
$( this ).removeData( "bs.modal" );
|
3
|
});
|
参考文档
Bootstrap 2.3.2 中文版文档——模态对话框
Twitter bootstrap remote modal shows same content everytime
转载于:https://www.cnblogs.com/zcm123/p/3616258.html
Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载相关推荐
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过 ...
- VB6不能加载MSCOMCTL.OCX最简单的解决办法
VB6不能加载MSCOMCTL.OCX最简单的解决办法 分类: Windows平台 VB6不能加载MSCOMCTL.OCX最简单的解决办法,好用到不得了!! ━━━━━━━━━━━━━━━━━━━━━ ...
- WordPress网站加载WAITING (TTFB) 时间过长解决办法
WordPress 刚刚安装的时候,性能是没问题的,我们安装了主题.插件.添加了一些小工具和菜单,然后我们就开始上传内容了,我们都很勤快 Waiting (TTFB) 时间 Time to First ...
- Dreamweaver8加载站点缓存时卡死,解决办法:
Dreamweaver8加载站点缓存时卡死,解决办法: 无论中文版的 dreamweaver 8,还是英文版本的dw8或绿色版本的DW8,都可能出现无法启动的情况,这个bug的出现是因为先前你曾经在使 ...
- an....软件一直在加载,打不开的解决办法
an-软件一直在加载,打不开的解决办法. utf-8编码解决大部分windows 软件抽风问题 将电脑设置成utf8编码
- 错误: 加载主类 时出现 LinkageError 解决办法
错误: 加载主类 时出现 LinkageError 解决办法 在导入本地项目,运行的时候,发生了错误: 加载主类 时出现 LinkageError 的错误,搜索了很多种方法,都没有办法解决,后来,自己 ...
- office加载MathType导致启动超慢解决办法记录
前一阵升级到了win11,结果不知为啥word打开时候加载特别慢,原因是mathType7加载慢(打开的时候word上边弹出该加载项加载时间过长的提醒,问是否要把mathTypeCommands.20 ...
- Android:WebView加载url网页显示不完整解决办法
WebView基本用法 如果想要在APP里面加载url网页,或者html代码,首先我们会想到WebView,它的基本用法如下: webview_layout.xml <?xml version= ...
- iframe js 加载失败_JS加载iFrame出现空白问题的解决办法
在使用IE6浏览器开发过程中出现各种奇葩问题,非常棘手,费劲脑汁终于问题解决.特此把我的问题描述及解决办法分享到脚本之家平台,帮助那些遇到此问题的朋友. 1.js加载iframe出现空白 iframe ...
最新文章
- 图解 Git 工作原理
- 使用LogKit进行日志操作
- 从命令式到响应式(四)
- LeetCode 103. 二叉树的锯齿形层次遍历(BFS / 双栈)
- 23种设计模式之备忘录模式
- 【TensorFlow】TensorFlow函数精讲之tf.train.ExponentialMovingAverage()
- windows下apache并发php,windows环境下apache死机问题的解决一例
- zz:NETCONF协议详解
- 罗永浩进军乐坛,参加《谁是宝藏歌手》,网友:来祸害音乐圈了?
- 优衣库KAWS联名款遭哄抢 大打出手场面惨烈 是我不懂时尚了吗?
- 如何清除手机拍照的图片 exif 防止泄露你的隐私
- kdays 游戏汉化教程[日记版本] 序章 接触
- Eclipse常用插件推荐
- Linux socket跨局域网聊天和文件传输
- 亲测豆果美食7.0版:美食食谱App的沉浸新味道
- 随堂笔记4——文本编辑器Vim
- python处理wps表格数据匹配_两个excel表格数据匹配wps-WPS怎样用VLOOKUP引用另一个表格的数据...
- 中产移民:很难找到好工作。
- Portainer-docker可视化工具
- 2017杭州云栖大会,.xin重磅发布一键查询企业信用
热门文章
- [BalticOI2014]Friends/[BZOJ4287]新三个和尚
- ​七周二次课(5月7日)监控io性能、free命令、ps命令、查看网络状态、linux下抓包...
- 以太坊POA共识机制Clique源码分析
- 阿里云前端周刊 - 第 25 期
- Linux 密码复杂度
- 《趣题学算法》—第1章1.2节简单的数学计算
- PHP的类中的常量,静态变量的问题。
- 理解 TCP(二):报文结构 1
- movebase导航
- saltstack的探索-salt指定目标和分组