Js 弹出框口并返回值的两种常用方法


Posted in Javascript onDecember 30, 2010

1.window.showModalDialog(url,args,dialogattrs)
参数说明:
url:弹出页面地址
agrs:主窗口传给对话框的参数,可以是任意类型(数组也可以)
dialogattrs:弹出窗口的样式参数
模式对话框用法:
主窗口:var value =window.showModalDialog('test.jsp',strs,'resizable:yes');
弹出框中通过window.returnValue来设置返回值,上面的value拿到的就是这个值,然后主窗口中可以对
这个值进行处理,实现交互处理
注:模式对话框的应用就在于它的返回值,可以返回简单字符窜,也可以返回数组,非模式对话框类似
2。window.open:
【父窗口】

<script> 
function show_child() 
{ 
var child=window .open("child.html","child","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"); 
/* if(!child.closed) 
{ 
if(!window .close()) 
{ 
var textValue = frm.txt.value; parent.frm0.txt0.value = textValue; 
} 
else 
{ 
window .close(); 
child.close(); 
} 
}*/ 
} 
</script> 
<a href="javascript:show_child();">打开子窗口</a> 
<form name=frm0> 
<input type="text" name="txt0" id="txt0"> //注意这里一定要写ID属性不然FF下取不到值 
</form>

【子窗口】
<script> 
function choseItem() 
{ 
var v=""; 
var check_item = document.frm.item; 
for(i=0;i<check_item.length;i++) 
{ 
if(check_item[i].checked) 
{ 
v+=","+check_item[i].value; 
} 
document.frm.txt.value=v.replace(/^,{1}/,""); 
} 
} 
function foo() 
{ 
window .close(); 
window .opener.document.getElementById("txt0").value=document.getElementById("txt").value 
} 
</script> 
<body> 
<form name=frm> 
<input type=checkbox name=item value=1 onclick="choseItem();">a 
<input type=checkbox name=item value=2 onclick="choseItem();">b 
<input type=checkbox name=item value=3 onclick="choseItem();">c 
<input type=checkbox name=item value=4 onclick="choseItem();">d 
<input type=text name="txt" id="txt"> 
</form> 
<input type=button value="关闭" onclick="foo();"> 
</body>

小结:一般情况下,windows.open因为自定义的比较多,所以用windows.open的较多,上面的很多网页编辑器喜欢用showModalDialog,实在不知道用哪个的的,就用window.open吧,很多成熟的cms系统都是用的window.open.
Javascript 相关文章推荐
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
基于iview的router常用控制方式
May 30 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
JS canvas实现画板和签字板功能
Feb 23 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 #Javascript
Javascript事件热键兼容ie|firefox
Dec 30 #Javascript
某人初学javascript的时候写的学习笔记
Dec 30 #Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 #Javascript
JavaScript的document对象和window对象详解
Dec 30 #Javascript
javascript hashtable 修正版 下载
Dec 30 #Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 #Javascript
You might like
php设计模式  Command(命令模式)
2011/06/17 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
js倒计时抢购实例
2015/12/20 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
浅谈js闭包理解
2019/04/01 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
Python标准库内置函数complex介绍
2014/11/25 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Python selenium自动化测试模型图解
2020/04/15 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
银行学习十八大感想
2014/01/11 职场文书
收款委托书范本
2014/09/11 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
公积金贷款承诺书
2015/04/30 职场文书
学生检讨书怎么写
2015/05/07 职场文书
建国大业观后感800字
2015/06/01 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技