js的window.showModalDialog及window.open用法实例分析


Posted in Javascript onJanuary 29, 2015

本文实例讲述了js的window.showModalDialog及window.open用法。分享给大家供大家参考。具体分析如下:

一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

二、基本语法:

window.open(pageURL,name,parameters)

其中:

pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)

三、示例:

<SCRIPT> 
<!-- 
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 
//写成一行 
--> 
</SCRIPT>

脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。
请对照。

上例中涉及的为常用的几个参数,除此以外还有很多其他参数,可参考如下所述的各项参数说明。

四、各项参数

其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。

参数 取值范围 说明
alwaysLowered yes/no 指定窗口隐藏在所有窗口之后
alwaysRaised yes/no 指定窗口悬浮在所有窗口之上
depended yes/no 是否和父窗口同时关闭
directories yes/no Nav2和3的目录栏是否可见
height pixel value 窗口高度
hotkeys yes/no 在没菜单栏的窗口中设安全退出热键
innerHeight pixel value 窗口中文档的像素高度
innerWidth pixel value 窗口中文档的像素宽度
location yes/no 位置栏是否可见
menubar yes/no 菜单栏是否可见
outerHeight pixel value 设定窗口(包括装饰边框)的像素高度
outerWidth pixel value 设定窗口(包括装饰边框)的像素宽度
resizable yes/no 窗口大小是否可调整
screenX pixel value 窗口距屏幕左边界的像素长度
screenY pixel value 窗口距屏幕上边界的像素长度
scrollbars yes/no 窗口是否可有滚动栏
titlebar yes/no 窗口题目栏是否可见
toolbar yes/no 窗口工具栏是否可见
Width pixel value 窗口的像素宽度
z-look yes/no 窗口被激活后是否浮在其它窗口之上

window.showModalDialog使用手册

基本介绍:

showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法:

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

参数说明:

sURL--
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments--
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

参数传递:

1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

parent.htm:

<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>

modal.htm:

<script>
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>

2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

parent.htm

<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>

modal.htm

<script>
window.returnValue="https://3water.com";
</script>

币种定义部分

var psAddStr="ProcessID="+ProcessID+"&AddFlag="+isAddFlag+"&BZBH="+vsBZBH+"&BZMC="+vsBZMC+"&BZFH="+vsBZFH+"&JD="+vsJD;
 
 var Result=window.showModalDialog("addSave.asp?"+psAddStr,'',"dialogHeight:250px;dialogWidth:250px;status:no;");

 希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 #Javascript
AngularJS中的模块详解
Jan 29 #Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 #Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 #Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 #Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 #Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 #Javascript
You might like
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
在html页面上拖放移动标签
2010/01/08 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
vue实现微信分享功能
2018/11/28 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
Python中对列表排序实例
2015/01/04 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
浅析Python3 pip换源问题
2020/01/06 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
Python eval函数原理及用法解析
2020/11/14 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
内业资料员岗位职责
2014/01/04 职场文书
高三毕业寄语
2014/04/10 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
初中地理教学反思
2016/02/19 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js