父页面bootstrap模态框:

  1. <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
  2. aria-labelledby="myModalLabel" aria-hidden="false" >
  3. <div class="modal-dialog modal-lg">
  4. <div class="modal-content">
  5. <iframe style="zoom: 0.8;" height="700px" src="" frameBorder="0" width="99.6%"></iframe>
  6. </div><!-- /.modal-content -->
  7. </div><!-- /.modal -->
  8. </div>

父页面js代码 :增加message监听器

  1. function openModal(){
  2. $('iframe').attr("src","http://localhost:8080/test/corsPage.html");
  3. $('#myModal').modal({backdrop:false});//false:表示单击模态框以外区域不关闭模态框
  4. }
  5. window.addEventListener('message', receiveMessage, false);
  6. function receiveMessage(evt) {
  7. var taskData = $.parseJSON(evt.data);
  8. if(taskData.opt=="C"){
  9. $("#myModal").modal("hide");
  10. }
  11. }

子页面corsPage.html,跨域/单独的页面(iframe打开,跟父页面无关),
如何关闭模态框/传值给父页面, JS代码:

  1. var data_ = {"opt":"C"};//Close/Hide modal
  2. window.parent.postMessage(JSON.stringify(data_), '*');

Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框的更多相关文章

  1. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  2. 打开子页面及刷新父页面 window.open window.opener.reload()

    //打开子页面 var url=children_url;window.open(url) //刷新parent页面 var url=parent_urlfunction refresh(url){  ...

  3. iframe中在父窗口打开子页面

    我们在做页面框架的时候,通常会采用一个iframe来显示子页面,但有这么种情况,就是session失效时,登录页面就会显示在iframe中,这不符合常理,一般应该显示在顶部才对. 下面的js代码可以解 ...

  4. 主页面获取iframe 的子页面方法。

    父页面parent.html <html> <head> <script type="text/javascript"> function sa ...

  5. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  6. js-关于iframe:从子页面给父页面的控件赋值方法

    项目中我们经会用到iframe,可能还会把iframe里的数值赋值给父页面空间. 接下来我们来说说有关于iframe赋值给父页面的方法. 1.子页面iframe给父页面的控件赋值方法. parent. ...

  7. window.open 打开子窗口,关闭所有的子窗口

    需求:通过window.open方法打开了子窗口,当关闭主窗口时,子窗口应当也关闭. 实现思路: 1.打开子窗口函数window.open(url,winName)的第二个参数winName可以唯一标 ...

  8. HTML子页面保存关闭并刷新父页面

    1.思路是子页面保存后,后台传递成功的js到前台. 2.js的原理是——子页面调用父页面的刷新 子页面 function Refresh() {            window.parent.Re ...

  9. iframe访问子页面方法

    在Iframe中调用子页面的Js函数 调用IFRAME子页面的JS函数 说明:假设有2个页面,index.html和inner.html.其中index.html中有一个iframe,这个iframe ...

随机推荐

  1. c语言自定义BOOL函数

    C语言中没有BOOL类型变量,它是C++独有的,由于使用BOOL类型可以使代码更具有可读性,很多编程者都在C中自己定义了类似的应用,一般方法有两种: 第一种:采用宏定义方式 typedef int B ...

  2. iOS常见算法笔试问题

    1. 给出一个由小写字母组成的字符串,把所有连续出现的 2 个 a 替换成 bb ( 2 个 b ),但是对于超过两个连续的 a,那么这些字符都不作替换.例如: bad -> bad (一个a, ...

  3. Ajax方法封装

    打算自己封装一个ajax方法,再不用jq库的情况下,直接引用: ajax作用:数据交互,在不刷新页面的情况下,发送请求,获取数据: 首页第一步常见一个ajax对象:XMLHttpRequest,之后会 ...

  4. centos环境自动化批量安装软件脚本

    自动化安装jdk软件部署脚本 准备工作: 1.在执行脚本的服务器上生成免密码公钥: 安装expect命令 yum install -y expect ssh-keygen 三次回车 2.将jdk-7u ...

  5. 阿里云slb和ucloud负载均衡ulb添加ssl证书将http服务https化的配置详解

    阿里云和ucloud服务器配置ssl证书将http服务https化的配置详解 项目背景: 苹果App于2017年1月1日将启用App Transport Security安全功能,即强制App通过HT ...

  6. zookeeper dubbo 问题解决录

    问题1: 运行起来不报错,不过在Console没有zookeeper的心跳信息,也就是说没有配置上zookeeper,而出错的原因是下面蓝色这段解析不了 spring-dubbo-provider.x ...

  7. mobx源码解读2

    我们将上节用到的几个类的构造器列举一下吧: function Reaction(name, onInvalidate) { if (name === void 0) { name = "Re ...

  8. input输入框怎么禁止粘贴

    <input type="text" value="" onpaste="return false;" /> 原文出处:http ...

  9. c/c++创建动态链接库

    extern "C" C++保留了一部分过程式语言的特点,因而它可以定义不属于任何类的全局变量和函数.但是,C++毕竟是一种面向对象的程序设计语言,为了支持函数的重载,C++对全局 ...

  10. js中原型的概念