js操作模态窗口及父子窗口间相互传值示例


Posted in Javascript onJune 09, 2014

parent.hmtl

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>父窗口</title> 
<script type="text/javascript"> window.onload=function(){ 
var btn=document.getElementById("btn"); 
btn.onclick=function(){ 
var obj={ 
test:"张三传到子窗口", 
win:window 
}; 
var returnValue = window.showModalDialog("child.html",obj,"dialogLeft:100px;dialogTop:100px;dialogWidth:400px;dialogHeight:300px;resizable:yes"); 
if(returnValue != null){ 
document.getElementById("content").innerHTML = returnValue; 
} 
}; 
} 
</script> 
</head> 
<body> 
<div id="content" style="margin:50px;width:100px;height:150px;border:5px solid #0000ff;"></div> 
<input type="button" id="btn" value="弹出子窗口"> 
</body> 
</html>

child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>子窗口</title> 
<script type="text/javascript"> 
window.onload=function(){ 
//获取url的传参 
var args = window.dialogArguments; 
var win = args.win;//父窗口对象 
var content=document.getElementById("content"); 
content.value=args.test; 
var btn=document.getElementById("btn"); 
btn.onclick=function(){ 
//模态对话框将值 
window.returnValue = content.value; 
window.close(); 
} 
} 
</script> 
</head> 
<body> 
<input type="text" id="content"><input type="button" id="btn" value="传值给父窗口"> 
</body> 
</html
Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
通过修改referer下载文件的方法
May 11 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
关于vue面试题汇总
Mar 20 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 #Javascript
js利用prototype调用Array的slice方法示例
Jun 09 #Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 #Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 #Javascript
jQuery实现的Div窗口震动特效
Jun 09 #Javascript
js动态创建标签示例代码
Jun 09 #Javascript
jquery中 $.expr使用实例介绍
Jun 09 #Javascript
You might like
优化PHP代码的53条建议
2008/03/27 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
javascript获取当前ip的代码
2009/05/10 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
Javascript函数的参数
2015/07/16 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Django如何实现内容缓存示例详解
2017/09/24 Python
python实现发送邮件功能代码
2017/12/14 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python多线程http压力测试脚本
2019/06/25 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
党员创先争优活动总结
2014/05/04 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
会计工作检讨书
2015/02/19 职场文书
计生个人工作总结
2015/02/28 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书