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 相关文章推荐
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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自定义hash函数实例
2015/05/05 PHP
php处理带有中文URL的方法
2016/07/11 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Python实现的HMacMD5加密算法示例
2018/04/03 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
求职信写作要突出重点
2014/01/01 职场文书
化工专业求职信
2014/07/01 职场文书
励志演讲稿500字
2014/08/21 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
见习期个人总结
2015/03/05 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python