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 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 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
linux中cd命令使用详解
2015/01/08 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python set内置函数的具体使用
2019/07/02 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Django Rest framework频率原理与限制
2019/07/26 Python
自定义django admin model表单提交的例子
2019/08/23 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python和js交互调用的方法
2020/06/23 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
继承权公证书
2014/04/09 职场文书
高中教师评语大全
2014/04/25 职场文书
学校课外活动总结
2014/05/08 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
慰问信格式
2015/02/14 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
导游词之贵州织金洞
2019/10/12 职场文书