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
Nov 25 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
Javascript模块化编程详解
Dec 01 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
js面向对象编程总结
Feb 16 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
PyQt5每天必学之组合框
2018/04/20 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
使用Python实现画一个中国地图
2019/11/23 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
什么是Python包的循环导入
2020/09/08 Python
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
考试退步检讨书
2014/01/15 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
生物科学专业自荐书
2014/06/20 职场文书
门球健将观后感
2015/06/16 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android