`

模态窗口介绍

阅读更多
一、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="http://www.51js.com";
</script>


练习代码 modalDialog.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
<!--window.open("page.html","新窗体","height=100,width=400,top=100,left=0,toolbar=no,scrollbars=no,menubar=no,resizable=no,location=no,status=no");-->
	
<!--window.open("page.html","新窗体2","height=100,width=400,top=100,left=450,toolbar=yes,scrollbars=yes,menubar=yes,resizable=yes,location=no,status=yes,hotkeys =yes");-->

var obj = new Object();
obj.name="51js";
var str = window.showModalDialog("page.html",obj,"dialogWidth=200px;dialogHeight=90px");

document.write(str);

</script>

</head>

<body>
</body>
</html>

page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>打开窗口</title>
<script>
var obj = window.dialogArguments;
alert("obj: "+obj);
alert("您传递的参数:"+obj.name);
window.returnValue = "hey guys !";//通过window.returnValue作为模态窗口的返回值;

</script>

</head>

<body>
显示模态窗口
</body>
</html>
分享到:
评论

相关推荐

    5个Jquery模态窗口

    以上内容详细介绍了使用jQuery实现模态窗口的基本原理、方法以及可能的设计和实现方式。对于"5个Jquery模态窗口"的压缩包,可能包含了这5种不同功能或特性的模态窗口示例代码,供开发者参考和学习。在实际项目中,...

    分页后弹出模态窗口刷新父窗口

    本文围绕“分页后弹出模态窗口刷新父窗口”这一主题进行了详细的介绍和分析。主要包括了对分页技术和模态窗口的基本概念的理解、具体实现逻辑的分析以及一些需要注意的事项。希望本文能为读者提供一定的参考价值。

    模态窗口demo及说明

    通过本文的介绍,我们了解了模态窗口的基本概念以及几种实现方法。尽管`window.showModalDialog()`和`window.showModelessDialog()`提供了方便的功能,但由于它们是非标准方法,在实际项目中应考虑使用更广泛的解决...

    模态窗口 跨域获取返回值

    然而,"模态窗口 跨域获取返回值"这个主题提供了一种解决方案,通过IFRAME的多层嵌套来实现跨域数据传递。下面将详细介绍这一技术。 模态窗口(Modal Window)通常指的是一个在用户与主页面交互时弹出的窗口,它...

    可拖拽的非模态窗口(满足在特定区域内)--bootstrap样式

    本篇将详细介绍如何实现一个具有Bootstrap样式的、在特定区域内可拖拽的非模态窗口,并讨论相关的JavaScript技术。 首先,让我们理解"非模态窗口"(Non-modal window)的概念。与传统的模态对话框不同,非模态窗口...

    js实现模态窗口的3种方式

    本文将详细介绍三种使用JavaScript实现模态窗口的方法,这些方法具有可定制性和实用性,可以直接应用于项目中。 **1. CSS + JavaScript 实现** 首先,我们可以通过CSS创建一个隐藏的模态窗口,并使用JavaScript来...

    纯CSS模态窗口实现炫酷动画效果

    而纯CSS模态窗口的实现,是一种高效且灵活的用户交互设计方法。本项目着重讲解如何利用CSS3特性来创建具有炫酷动画效果的模态窗口,无需依赖JavaScript库如jQuery,仅依靠CSS3库就能实现。 首先,模态窗口(Modal ...

    jQuery炫酷全屏模态窗口插件

    在实际项目中,这个jQuery全屏模态窗口插件可以用于展示产品介绍、用户登录/注册、视频播放、大型图像画廊等场景。通过自定义动画效果,可以创造出独特的用户体验,增加用户对网站的互动性和记忆度。 总结来说,这...

    bootstrap模态窗口美化特效

    Bootstrap模态窗口是网页设计中常用的一种交互元素,它允许用户在不离开当前页面的情况下查看或操作额外的信息。在这款“bootstrap模态窗口美化特效”中,开发者通过增强原生Bootstrap模态窗口的视觉效果,提供了...

    Bootstrap自定义模态窗口样式

    `readme.html`用于介绍如何使用,`jQuery之家.url`可能是一个链接指向jQuery相关的学习资源,`css`文件夹包含自定义的CSS样式,`related`可能包含与模态窗口相关的其他资源,`fonts`文件夹可能存储自定义字体,`js`...

    使用jQuery创建模态窗口登陆效果.zip

    本教程将详细介绍如何使用jQuery库来创建一个模态窗口登录效果。 首先,jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和动画等功能。在这个项目中,我们将利用jQuery的灵活性和便利性来实现登录模态...

    jQuery超酷响应式自适应模态窗口特效插件

    模态窗口具有较高的交互性,因为它阻止用户与背景页面进行交互,直到模态窗口关闭。在这个特效插件中,模态窗口不仅具备基本功能,还引入了五种独特的动画效果,提升了用户体验。 **jQuery插件的特效** 1. **逐渐...

    jquery模态窗口

    本文将详细介绍如何使用 jQuery 创建模态窗口,并提供相关源代码示例。 首先,理解 jQuery 的基本概念是必不可少的。jQuery 是一种简化 JavaScript 操作的库,它封装了许多实用的函数,如选择器、DOM 操作、事件...

    HTML模态窗口

    通过上述介绍,我们可以了解到如何使用`window.showModalDialog()`方法来实现模态窗口的基本操作,包括打开、关闭以及参数传递和返回。此外,还提到了一些实际应用中需要注意的问题,如兼容性和页面提交问题等。掌握...

    java 自定义JDialog实现模态窗口

    本篇文章将详细介绍如何通过自定义`JDialog`来实现模态窗口,并探讨相关知识点。 首先,`JDialog`是`Window`类的一个子类,它可以直接关联到一个特定的`Frame`(通常是`JFrame`),也可以独立存在。模态对话框...

    JS--的模态窗口应用

    JavaScript中的模态窗口和非模态窗口是网页交互中常用的功能,它们用于向用户展示信息、获取用户输入或执行特定任务。模态窗口会阻止用户与页面其他部分的交互,直到对话框关闭;而非模态窗口则允许用户在多个窗口间...

    js操作模态窗口及父子窗口间相互传值示例

    本文将详细介绍如何使用JavaScript来操作模态窗口,并实现父子窗口之间的数据传递。 首先,我们要了解什么是模态窗口以及如何创建一个模态窗口。在上述示例中,父窗口通过`window.showModalDialog`方法弹出了一个...

    jQuery炫酷点击变形全屏放大的模态窗口

    模态窗口(Modal Window)是一种常见的UI设计模式,用于在用户与主页面交互时弹出一个遮罩层或独立窗口,强制用户先完成当前任务再继续其他操作。这种设计常用于表单提交、警告提示、用户反馈等场景。在jQuery库的...

    javascript Demo模态窗口

    描述部分表明作者认为一些网站使用Jquery插件实现模态窗口不够灵活,并且介绍了下面的Demo支持回调功能,可以直接使用modalDialog.js文件。 标签“javascript 模态窗口”再次确认了文档内容的主题。 在【部分内容...

Global site tag (gtag.js) - Google Analytics