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 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
js字符编码函数区别分析
Dec 28 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
vue实现扫码功能
Jan 17 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
js中判断控件是否存在
2010/08/25 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
Python实现数值积分方式
2019/11/20 Python
python 实现两个线程交替执行
2020/05/02 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
犯错检讨书
2014/02/21 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
家长通知书教师评语
2014/04/17 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
刑事上诉状范文
2015/05/22 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书