`
liu_bia
  • 浏览: 109164 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论
  • ztbzg: 学习了,今天用上了,多谢lz 以前动态增加div 是直接拼字符 ...
    动态生成层
阅读更多

利 用JS中window.showModalDialog()详解

 

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="i5tt";
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.i5tt.com/ ";
</script>

 

将参数传递与返回结果结合在一起的实例

 ParentPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml ">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">

        function openwindow() {
            var obj = new Object();
            obj.value = "3";
            obj.name = "4";
            obj.sew = "5";
            str =window.showModalDialog("ChildPage.aspx",obj,"dialogWidth=200px;dialogHeight=100px");
            alert(str);

        }

        function openModelessDialog() {
            var obj = new Object();
            obj.value = "3";
            obj.name = "4";
            obj.sew = "5";
            str = window.showModelessDialog("ChildPage.aspx", obj, "dialogWidth=200px;dialogHeight=100px");
            alert(str);

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" id="btnOpen" value="打开模态窗口" onclick="openwindow();" />
    <input type="button" id="Button1" value="打开非模态窗口" onclick="openModelessDialog();" />
    </div>
    </form>
</body>
</html>

 ChildPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml ">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function getArguments() {
            var obj = window.dialogArguments
            alert("您传递的参数为:" + obj.value)
        }

        function windowclose() {
            window.returnValue = "childPage.Close";
        }
    </script>
</head>
<body onunload="windowclose();">
    <form id="form1" runat="server">
    <div>
    <input type="button" id="btnOpen" value="打开窗口" onclick="getArguments();" />
    <input type="button" id="btnClose" value="关闭窗口" onclick='self.close(); ' />

    </div>
    </form>
</body>
</html>

windows.open() 是打开普通窗口。
window.showModalDialog 是打开模态窗口。
什么是模态窗口:
模态窗口打开后用户只能对当前的模态窗口进行操作,而其他窗口不能被激活和操作。用户只有对当前的模态窗口做出操作,模态窗口关闭后才能对其他窗口做出操 作。

适用于用户必须选择的提示等等的消息窗口的弹出。

 

 

分享到:
评论

相关推荐

    JS学习资料(自己整理)

    下面将根据"JS学习资料(自己整理)"的描述,深入探讨JavaScript的基础知识。 一、变量与数据类型 JavaScript 支持七种数据类型,包括两种原始类型:Undefined、Null、Boolean、Number、String、Symbol(ES6新增)...

    javascript_js学习教程

    此“javascript_js学习教程”是针对初学者精心设计的,来源于中兴通讯的内部培训资料,旨在帮助新入门的开发者快速掌握JavaScript的基础知识和实践技巧。 一、JavaScript基础 1. 变量与数据类型:JavaScript支持...

    js操手特效,js效果,js学习资料

    - **免费Codecademy课程**:提供互动式的JavaScript学习路径。 - **W3Schools**:提供了丰富的JavaScript教程和示例代码。 压缩包内的文件可能与这些知识点直接相关: 1. **FixedTips.htm**:可能是一个展示固定...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册六:JS条件语句

    JavaScript是Web前端开发的核心语言之一,它为网页和应用程序提供了动态交互的能力。在JavaScript中,条件语句是...在头歌教学实践平台的Web前端开发课程中,这些基础知识的学习和实践将为你的编程技能打下坚实的基础。

    JS学习.zip

    JavaScript,简称JS,是Web开发...综上所述,这个"JS学习.zip"压缩包提供了全面的JavaScript学习资源,从基础到高级,覆盖了核心概念、DOM操作、面向对象和异步编程,是初学者或进阶者提升JavaScript技能的宝贵资料。

    js 笔记 javascript 学习笔记

    本学习笔记将深入探讨JavaScript的核心概念,包括变量、数据类型、操作符、控制流程、函数、对象、数组、原型链、闭包等,并结合实际示例,如my.js、order.js、login.js等文件,来讲解其在实际项目中的应用。...

    学习资料 js学习资料

    在“学习资料 js学习资料”这个主题下,我们主要关注JavaScript的基础知识、实例应用以及与CSS的协同工作。 1. JavaScript基础: - 变量:JavaScript中的变量用于存储数据,可以使用var、let或const关键字声明。 ...

    史上最全的JavaScript学习资料

    这个压缩包中的“史上最全的JavaScript学习资料”显然包含了一系列丰富的资源,旨在帮助学习者深入理解和掌握JavaScript。 JavaScript最初由Netscape公司的Brendan Eich设计,目的是为了解决网页动态交互的问题,使...

    JS学习资料

    首先,"JS学习"意味着我们将探讨JavaScript的基础语法,包括变量、数据类型(如字符串、数字、布尔值、对象等)、控制结构(如条件语句、循环语句)、函数、作用域、闭包等。这些都是编程的基石,理解它们能够帮助...

    js学习资料

    JavaScript,简称JS,是一种广泛应用于Web开发的轻量级编程语言,主要负责客户端的动态交互。李炎恢老师的JS学习资料是一套全面且深入的学习资源,适合初学者和有一定基础的开发者进阶学习。 首先,JavaScript是Web...

    html css js 学习.zip

    html css js 学习html css js 学习html css js 学习html css js 学习 html css js 学习html css js 学习html css js 学习html css js 学习 html css js 学习html css js 学习html css js 学习html css js 学习 ...

    html css js学习.zip

    html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习...

    html css js 学习笔记.zip

    html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...

    JavaScript学习笔记_js常用函数封装_js包.zip

    本压缩包“JavaScript学习笔记_js常用函数封装_js包.zip”包含了对JavaScript基础及进阶技巧的学习资料,特别关注了函数封装和模块化开发实践。 首先,`tool.js`可能是一个实用工具函数集合,封装了一些常见的...

    js 学习课程 ppt

    JavaScript(简称JS)是一种广泛应用于Web开发的轻量级、解释型编程语言,以其灵活性和交互性在网页设计中占据核心地位。本课程通过两份PPT深入浅出地介绍了JavaScript的基本概况和主要分类,旨在帮助学习者从宏观...

    Javascript学习安卓版

    Javascript学习是Android客户端目前最全面的免费离线Javascript学习书籍,从Html入门到Html样式设计,再到Javascript,提高网页设计能力。主要内容包括: 1、Html基本标签 2、Html表单知识 3、Web2.0(Div+Css样式)...

    HTML-CSS-JS 学习.zip

    HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 ...

    HTML+CSS+JS学习.zip

    HTML+CSS+JS学习HTML+CSS+JS学习HTML+CSS+JS学习 HTML+CSS+JS学习HTML+CSS+JS学习HTML+CSS+JS学习 HTML+CSS+JS学习HTML+CSS+JS学习HTML+CSS+JS学习 HTML+CSS+JS学习HTML+CSS+JS学习HTML+CSS+JS学习 HTML+CSS+JS学习...

Global site tag (gtag.js) - Google Analytics