Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框
父页面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 > 打开子页面 > 数据传输/关闭模态框的更多相关文章
- BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版
如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...
- 打开子页面及刷新父页面 window.open window.opener.reload()
//打开子页面 var url=children_url;window.open(url) //刷新parent页面 var url=parent_urlfunction refresh(url){ ...
- iframe中在父窗口打开子页面
我们在做页面框架的时候,通常会采用一个iframe来显示子页面,但有这么种情况,就是session失效时,登录页面就会显示在iframe中,这不符合常理,一般应该显示在顶部才对. 下面的js代码可以解 ...
- 主页面获取iframe 的子页面方法。
父页面parent.html <html> <head> <script type="text/javascript"> function sa ...
- 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题
<frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...
- js-关于iframe:从子页面给父页面的控件赋值方法
项目中我们经会用到iframe,可能还会把iframe里的数值赋值给父页面空间. 接下来我们来说说有关于iframe赋值给父页面的方法. 1.子页面iframe给父页面的控件赋值方法. parent. ...
- window.open 打开子窗口,关闭所有的子窗口
需求:通过window.open方法打开了子窗口,当关闭主窗口时,子窗口应当也关闭. 实现思路: 1.打开子窗口函数window.open(url,winName)的第二个参数winName可以唯一标 ...
- HTML子页面保存关闭并刷新父页面
1.思路是子页面保存后,后台传递成功的js到前台. 2.js的原理是——子页面调用父页面的刷新 子页面 function Refresh() { window.parent.Re ...
- iframe访问子页面方法
在Iframe中调用子页面的Js函数 调用IFRAME子页面的JS函数 说明:假设有2个页面,index.html和inner.html.其中index.html中有一个iframe,这个iframe ...
随机推荐
- MAXIMO-修改菜单
MAXIMO菜单修改 模块: select * from MAXMODULES; -- 查询模块 一级菜单(应用程序): select * from MAXMENU where MENUTYPE=' ...
- [PHP]使用PHPMailer发送带附件并支持HTML内容的邮件
来源:http://www.helloweba.com/view-blog-205.html PHPMailer是一个封装好的PHP邮件发送类,支持发送HTML内容的电子邮件,以及可以添加附件发送,并 ...
- Visual Studio 2015 工具箱丢失
网上主要的解答分为两种:1. 未打开设计界面 2. 重置 实际上,还有一个原因是,没有启动完整版的VS. 安装完后,会有两个VS的程序,一个是Blend For Visual Studio 2015, ...
- GPON和820.1p学习及资料(zt)
1)hw的两个PPT不错,GPON技术基础.ppt和10G-GPON技术基础.ppt, 介绍了GPON的知识背景,标准的名称,帧协议. 尤其是详细对比了10G-PON和G-PON的区别,以及演进的道路 ...
- CheckBox设置Enabled为False后,无法修改ForeColor
设置CheckBox的AutoCheck为False,Enabled为True,即可解决.
- MySQL中存储过程+事件的使用方法
一.背景 将界面操作日志存储在MySQL数据库中的operationlog表中,如果该表不能自动备份,表中的数据会越来越多,影响速度.可以定期将表中数据备份到另外一个表中来解决. 二.解决方案 1.使 ...
- MySQL连接线程kill利器之pt-kill
如何每10秒检查一次,杀死指定用户超过100秒的查询? pt-kill \ --no-version-check \ --host 127.0.0.1 --port 3306 --user 'xxxx ...
- STP的作用和操作
STP的作用 STP通过阻塞端口来消除环路,并能够实现链路备份的目的 STP的操作 选举一个根桥 比较交换机的桥ID,越小越优先 桥ID 是8个字节,2个字节的优先级+6个字节的MAC地址 2.每个 ...
- string、Empty和null三者的区别
string.Empty和null三者的区别 本文转自 http://www.bitscn.com/pdb/dotnet/201003/181883.html 时间:2010-03-01 00:00 ...
- Android Studio tips2
Android不推荐把字符串进行硬编码,一般的做法是把字符串定义在laylout里,并在xml文件里对键值进行引用 例如<第一行代码>中 Hello word程序中"Hello ...