脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 模态对话框只价值一次remot数据的解决方法

Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

 更新时间：2017年07月09日 16:25:29   作者：dodo‘s  
前端框架 Bootstrap 的模态对话框，可以使用 remote 选项指定一个 URL，这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中，但是它只会加载一次，不过通过在事件中调用 removeData() 方法可以解决这个问题，具体操作方法，大家通过本文了解下吧

摘要: 前端框架 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>

显示效果与下图相似：

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

<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 数据的完美解决办法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

相关文章

  • 微信小程序webView嵌入H5的方法实例

    微信小程序webView嵌入H5的方法实例

    web-view是小程序提供的一个可以直连h5页面的组件,只要传递一个h5页面的地址,就可以在小程序里直接打开预览该h5页面,这篇文章主要给大家介绍了微信小程序webView嵌入H5的相关资料,需要的朋友可以参考下
    2021-07-07
  • 详解小程序毫秒级倒计时（适用于拼团秒杀功能）

    详解小程序毫秒级倒计时（适用于拼团秒杀功能）

    这篇文章主要介绍了小程序毫秒级倒计时，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JS保留小数几种简单方法例子

    JS保留小数几种简单方法例子

    这篇文章主要给大家介绍了关于JS保留小数几种简单方法,在JS中保留小数的方法有很多,可以Math函数或者以字符串形式来进行处理,但在有的时候需要四舍五入,有时候不需要,需要的朋友可以参考下
    2023-10-10
  • JavaScript实现简易tab栏切换案例

    JavaScript实现简易tab栏切换案例

    这篇文章主要为大家详细介绍了JavaScript实现简易tab栏切换案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JavaScript中的普通函数与构造函数比较

    JavaScript中的普通函数与构造函数比较

    这篇文章主要介绍了JavaScript中的普通函数与构造函数比较,需要的朋友可以参考下
    2015-04-04
  • 浅谈pc端rem字体设置的问题

    浅谈pc端rem字体设置的问题

    下面小编就为大家带来一篇浅谈pc端rem字体设置的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 详解钉钉小程序组件之自定义模态框（弹窗封装实现）

    详解钉钉小程序组件之自定义模态框（弹窗封装实现）

    这篇文章主要介绍了钉钉小程序组件之自定义模态框（弹窗封装实现）的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 微信小程序实现婚礼邀请函全部流程

    微信小程序实现婚礼邀请函全部流程

    本文介绍了如何使用微信小程序技术制作个性化的婚礼邀请函,包括页面布局、交互设计和多媒体资源整合,详细阐述了从功能需求到页面设计、测试优化以及发布流程的全面开发步骤,通过本项目,可以提升创意设计和用户体验优化的能力,需要的朋友可以参考下
    2024-10-10
  • 微信小程序授权登录的优雅处理方式

    微信小程序授权登录的优雅处理方式

    这篇文章主要给大家介绍了关于微信小程序授权登录的优雅处理方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 前端实现跨页面通信的最全实现方案指南

    前端实现跨页面通信的最全实现方案指南

    这篇文章将从同源页面,不同源页面,父子框架三个维度,详细为大家讲解前端跨页面通信的各种实现方案,并提供代码示例和对比分析,需要的小伙伴可以参考下
    2025-04-04

最新评论