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 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
JavaScript中的几种继承方法示例
Dec 06 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
理解JS事件循环
2016/01/07 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
python生成指定长度的随机数密码
2014/01/23 Python
python对url格式解析的方法
2015/05/13 Python
python字典基本操作实例分析
2015/07/11 Python
python调用fortran模块
2016/04/08 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
如何定义TensorFlow输入节点
2020/01/23 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
平面设计岗位职责
2013/12/14 职场文书
公司接待方案
2014/03/08 职场文书
销售主管竞聘书
2014/03/31 职场文书
《故乡》教学反思
2014/04/10 职场文书
小学生环保演讲稿
2014/04/25 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
法人授权委托书样本
2014/09/19 职场文书
三严三实心得体会范文
2014/10/13 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
置业顾问岗位职责
2015/02/09 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript