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 相关文章推荐
js切换div css注意的细节
Dec 10 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
angularJS开发注意事项
May 26 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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 和 MYSQL
2006/10/09 PHP
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
总结一些js自定义的函数
2006/08/05 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python交互式图形编程实例(三)
2017/11/17 Python
Django REST framework 分页的实现代码
2019/06/19 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
平面设计师岗位职责
2014/09/18 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python