父页面bootstrap模态框:

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

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

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

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

var data_ = {"opt":"C"};//Close/Hide modal
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. centos6配置网卡

    #设置开机启动和静态地址 vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 HWADDR=D8::E6::3F:CF TYPE=Ethe ...

  2. 为了解决mysqlbing翻译表字段问题而分析frm文件(持续更新)

    出处:kelvin19840813 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但 ...

  3. Jquery--动画

    动画: 1.show(),hide() 2..stop() .slideDown();  向下. .stop().slideUp();  向上 (可以做下拉)        .stop() 执行之前加 ...

  4. PHP实现队列及队列原理

    看看各语言实现队列的方法:PHP实现队列:第一个元素作为队头,最后一个元素作为队尾 <?php /** * 队列就是这么简单 * * @link http://www.phpddt.com */ ...

  5. BulkSqlCopy 批量导入数据(Ef支持)

    Ado.net对批量数据的支持相信大家都已经非常熟悉.再此就不在多说,就当是给自己备个份,没办法,这个方法太好用了. public static void BulkCreate( string tab ...

  6. linux学习4 网络命令和关机重启

    网络命令 write write 用户名 回车后输入信息 以 ctrl+d 保存结束 wall wall [message] //that is all,发送给所有人 ping ping 选项 IP地 ...

  7. 限制scrollView的上下移动

    只要把scrollView.contentSize 中的hight高设为0,就不会上下移动了.如果不想水平移动,就把宽设0.

  8. Android_AsyncTaskDemo之QQ记步数(画圆形图片知识)

    今天学习了AsyncTask Android 的异步机制.我简单的实现我的一个小小案例--qq记步数.然后穿插一个画圆形图片的知识点. 由于所学知识有限,目前我计数,还有排名等等我就简单的利用随机数实 ...

  9. quartz 框架定时任务,使用spring @Scheduled注解执行定时任务

    配置quartz 在spring中需要三个jar包: quartz-1.6.5.jar.commons-collections-3.2.jar.commons-logging-1.1.jar 首先要配 ...

  10. socket选项总结(setsocketopt)

    功能描述:        获取或者设置与某个套接字关联的选 项.选项可能存在于多层协议中,它们总会出现在最上面的套接字层.当操作套接字选项时,选项位于的层和选项的名称必须给出.为了操作套接字层的选项, ...