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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
Vue toFixed保留两位小数的3种方式
Oct 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实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
js运动应用实例解析
2015/12/28 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
windows下安装Python和pip终极图文教程
2017/03/05 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Python 中如何写注释
2020/08/28 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
教学个人的自我评价分享
2014/02/16 职场文书
检举信的格式及范文
2014/04/04 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
护士节策划方案
2014/05/19 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
2014年教师工作总结
2014/11/10 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
第二次离婚起诉书
2015/05/18 职场文书
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS