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. 如何利用php+android+新浪sae服务器做一个app下载应用

    功能简介:提供一个app下载的平台,类似于appstore,上面有很多app可供下载 实现基本思路:利用android,在手机桌面建立一个图标,点击该图标不是打开app应用,而是跳转到一个web页面, ...

  2. python迭代器生成器(二)

    其他内置类型迭代器 除了文件以及列表这样的实际的序列外,其他类型也有适合的迭代器. 遍历字典的经典方法是明确的获取其键的列表. 在最近的python版本中,字典有一个迭代器,在迭代环境中,会自动一次返 ...

  3. KBEngine简单RPG-Demo源码解析(1)

    一:环境搭建1. 确保已经下载过KBEngine服务端引擎,如果没有下载请先下载          下载服务端源码(KBEngine):              https://github.com ...

  4. 今天get到的两个angular知识点

    angular 控制器$scope依赖注入的正确写法 <div ng-controller="ctrl"> {{name}} {{age}} <div ng-co ...

  5. 本地服务器 windows server 2008 datacenter conn /as sysdba 提示 ora-01031 insufficient privileges

    原因是需要把当前用户administrator(为例)添加到ora_dba组里. 服务器管理器--配置--本地用户和组--组

  6. Asp.Net MVC-01-起步

    创建第一个MVC程序 我们先创建一个ASP.NET Web程序 模板选择MVC,因为不想使用默认的身份认证我们点击更改身份认证并选择不进行身份认证. 创建的项目结构如下: 配置与初始化 Web配置文件 ...

  7. iOS 微信消息拦截插件系列教程-附录(服务端成果展示)

    微信iOS消息拦截插件教程 标签: 越狱开发 背景介绍 本教程所有内容免费 本教程来源于一次知识分享,如果有需要了解更多的 请联系QQ:480071411 iOS逆向高级开发群:375024882 服 ...

  8. 深度理解Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...

  9. Jemeter基础

    jemeter主要组件: a.测试计划(Test Plan) 是使用JMeter进行测试的起点,它是其它JMeter测试元件的容器. b.线程组(Thread Group) 代表一定数量的并发用户,它 ...

  10. 响应式移动端去除css的hover和jq的hover还有input在苹果下的默认样式

    去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window). ...