bootstrap模态框远程加载网页的方法

在bootsrap模态框文档里给出了这个方法:

使用链接模式

<a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a>

使用脚本模式:

$("#modal").modal({
remote: "tieniu.php"
});

没有给出任何实例,这种用法还有一些细节没有说明。你如果仅仅这样复制使用,那是没有效果的。

很多朋友都在网上问题这个问题,大多数人都在复制粘贴,自己都没有验证,就乱回复,唉!

下面是正确的模态框远程加载方法的代码

客户端代码

<a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a>
<div class="modal" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<!--这里是远程加载过过来的内容区-->
</div>
</div>
</div>

服务端代码,服务端的代码需要包含一部分模态框的框体文本,请注意

<?php $rnd=rand(1000,9999);?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<?php echo $rnd;?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>

关闭模态框,再次调用远程页面,但是内容不刷新

以下是解决方式

 $(document).ready(function () {
$("#modal").on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");
});
})

bootstrap模态框远程加载网页的正确处理方式的更多相关文章

  1. bootstrap 模态框动态加载数据

    .页面中添加modal <!-- 模态框(Modal) --> <div class="modal fade" id="showModal" ...

  2. Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载

    http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...

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

    原文: https://my.oschina.net/qczhang/blog/190215?p=1

  4. Android-WebView加载网页(new WebView(this)方式)

    之前的博客,都是 findViewById(R.id.webview);,来得到WebView, 此博客使用 new WebView(this)方式; AndroidManifest.xml中配置网络 ...

  5. bootstrap模态框手动关闭遮盖层不消失

    模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...

  6. 解决display none到display block 渲染时间过长的问题,以及bootstrap模态框导致其他框中input不能获得焦点问题的解决

    在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...

  7. 使用Bootstrap模态框实现增删改查功能

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 本文实现的是使用模态框实现简单的增删改查的功能. ...

  8. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  9. 【转】bootstrap模态框(modal)使用remote方法加载数据,只能加载一次的解决办法

    http://blog.csdn.net/coolcaosj/article/details/38369787 bootstrap的modal中,有一个remote选项,可以动态加载页面到modal- ...

随机推荐

  1. 命令模式(Command Pattern)

    命令模式的本质是对命令进行封装,将发出命令的责任和执行命令的责任分割开.命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系. 将来自客户端的请求传入一个对象,从而使你可用不同的请求对客户进行参 ...

  2. Java--CyclicBarrier同步屏障原理,使用

    package com; import java.util.Map; import java.util.concurrent.BrokenBarrierException; import java.u ...

  3. 【BZOJ-1974】auction代码拍卖会 DP + 排列组合

    1974: [Sdoi2010]auction 代码拍卖会 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 305  Solved: 122[Submit ...

  4. 『创意欣赏』20款精致的 iOS7 APP 图标设计

    这篇文章给大家分享20款精致的 iOS7 移动应用程序图标,遵循图形设计的现代潮流,所有图标都非常了不起,给人惊喜.通过学习这些移动应用程序图标,设计人员可以提高他们的创作,使移动用户界面看起来更有趣 ...

  5. spring-boot支持双数据源mysql+mongo

    这里,首先想说的是,现在的web应用,处理的数据对象,有结构化的,也有非结构化的.同时存在.但是在spring-boot操作数据库的时候,若是在properties文件中配置数据源的信息,通过默认配置 ...

  6. visio2007无法拖动

    连按两下键盘上的 “Esc” 键

  7. Java开源内容管理CMS系统J4CMS的几个样式

    www.j4cms.com java 开源内容管理 页面直接编辑 bootstrap3 样式 default 样式 metro 样式 oschina 样式 leblog 样式 foundation 样 ...

  8. 问题7:JavaScript 常用正则示例

    1. trim功能(清除字符串两端空格) String.prototype.trim = function() { return this.replace(/(^\s+)|(\s+$)/g, ''); ...

  9. MongoDB数据库中更新与删除数据

    MongoDB数据库中更新与删除数据 在MongoDB数据库中,可以使用Collection对象的update方法更新集合中的数据文档.使用方法如下所示: collection.update(sele ...

  10. eoe移动开发者大会—移动开发者的极客盛宴 2013年9月14日期待您的加入!!

    2013 eoe移动开发者大会北京站即将盛大开启!      大会介绍 由国内最大的移动开发者社区eoe主办,在行业盟友的倾力支持下,集合了来自微软.Google.亚马逊.ARM等跨国公司业务负责人的 ...