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 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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中变量及部分适用方法
2008/03/27 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
php模拟post提交数据的方法
2015/02/12 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
js实现简易ATM功能
2020/10/27 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
Java servlet面试题
2012/03/04 面试题
法人授权委托书
2014/09/16 职场文书
民用住房租房协议书
2014/10/29 职场文书
婚前保证书范文
2015/02/28 职场文书
教师节大会主持词
2015/07/06 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL
Win11快速关闭所有广告推荐
2022/04/19 数码科技
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL