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 ...
随机推荐
- Java日志——2016年5月30日
1. 局部变量必须初始化,可以定义的同时初始化,也可以定义完成之后进行初始化. 2. Java7新特性:数字之间可以使用"_"连接,eg:23_44_5 = 23445,0B110 ...
- rabbitMQ学习(四)
按照routing key接收信息 发送端: public class EmitLogDirect { private static final String EXCHANGE_NAME = &quo ...
- XidianOJ 1041: Franky的游戏O
题目描述 Franky是super的人造人,来到了n*m的棋盘世界玩冒险游戏. n×m的棋盘由n行每行m个方格组成,左上角的方格坐标是(0,0),右下角的方格坐标是(n-1,m-1). 每次游戏时,他 ...
- 锋利的js前端分页之jQuery
大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. /** * pageSi ...
- jsp与数据库的连接
经过一段时间的学习与上网查资料,我已经成功的用java语言连接上了数据库, 本以为同理jsp跟数据库的连接肯定水到渠成的,但是在经过尝试很多次后我发现现实永远是骨感的,最终结果是花了一个下午的时间去建 ...
- 【英语魔法俱乐部——读书笔记】 0 序&前沿
[英语魔法俱乐部——读书笔记] 0 序&前沿 0.1 以编者自身的经历引入“不求甚解,以看完为目的”阅读方式,即所谓“泛读”.找到适合自己的文章开始“由浅入深”的阅读,在阅读过程中就会见到 ...
- Xrm.Utility.openEntityForm 时404.15 maxQueryString 错误 和 长度超过maxQueryStringLength值 错误
最近的项目里用到Xrm.Utility.openEntityForm 创建新记录时分别碰到以下错误: 以及 这两个错误都是因为想传递给表单的参数太多导致的url 查询参数太长导致的,前者是因为iis的 ...
- Exception Type & Exception Code
1.Exception Type 1)EXC_BAD_ACCESS 此类型的Excpetion是我们最长碰到的Crash,通常用于访问了不改访问的内存导致.一般EXC_BAD_ACCESS后面的&qu ...
- 用"时:分:秒"的方式显示运行时间
import datetime,time start = datetime.datetime.now()...dosomething() end = datetime.datetime.now()pr ...
- swt controls里的控件list
swt controls里的控件list,怎么显示滚动条,并且滚动条自动移动到最下边时,显示最新内容 package com.jokul; import org.eclipse.swt.widgets ...