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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
js实现下拉框二级联动
Dec 04 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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 中的str_replace 函数总结
2007/04/27 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
统计出现最多的字符次数的js代码
2010/12/03 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
详解a++和++a的区别
2017/08/30 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
简单了解python数组的基本操作
2019/11/26 Python
python使用建议与技巧分享(一)
2020/08/17 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
销售代表求职自荐信
2013/10/01 职场文书
大学生毕业的自我鉴定
2013/11/13 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
体育活动总结
2015/02/04 职场文书
二手房购房意向书
2015/05/09 职场文书
单位综合评价意见
2015/06/05 职场文书
高二语文教学反思
2016/02/16 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫