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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
js实现随机点名程序
Sep 17 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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解析字符串里所有URL地址的方法
2015/04/03 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
详解如何构建Angular项目目录结构
2017/07/13 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python日志记录模块实例及改进
2017/02/12 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
python远程连接MySQL数据库
2019/04/19 Python
django如何实现视图重定向
2019/07/24 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
工地安全检查制度
2014/02/04 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
初级职称评定工作总结
2015/08/13 职场文书
Python基础详解之邮件处理
2021/04/28 Python
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android