Bootstrap modal只加载一次数据的解决办法(推荐)


Posted in Javascript onNovember 24, 2017

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>

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

<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 选项让模态对话框加载页面到 .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 modal只加载一次数据的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
HTML上传控件取消选择
Mar 06 Javascript
JQuery for与each性能比较分析
May 14 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
javascript如何创建对象
Aug 29 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 #Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 #Javascript
vue 文件目录结构详解
Nov 24 #Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 #Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 #Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 #Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 #Javascript
You might like
php下目前为目最全的CURL中文说明
2010/08/01 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JS判定是否原生方法
2013/07/22 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
np.random.seed() 的使用详解
2020/01/14 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
社区消防工作实施方案
2014/03/21 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
公司地址变更通知
2015/04/25 职场文书
小学工作总结2015
2015/05/04 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
python装饰器代码解析
2022/03/23 Python