对话框一般分为两种类型：
模态类型（modal）与非模态类型（modeless）。
所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。
非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。本文介绍如何使用JavaScript语言来创建这两种类型的对话框、控制其大小和位置、改变其外观以及在对话框间的数据传递。(引用)
一、创建模态和非模态对话框
创建模态对话框：（会缓存最近一次页面的值，通过一些设置可绕过系统的判断）
reValue = window.showModalDialog(URL , [Argument] ,[ornaments]);
创建非模态对话框：（不会）
reValue = window.showModelessDialog(URL ,[Argument] ,[ornaments]);
· reValue ：对于showModalDialog()，它表示被打开的对话框窗口设置的returnValue属性值。对于showModelessDialog()，它表示新窗口对象。
· Argument：这个参数可用于传递某种类型的数据到打开的对话框，数据可以是一个数值、字符串、数组或者一个对象类型。在新窗口中引用这个数值时，可通过新创建window对象的dialogArguments 属性。
· ornaments：用这个参数指定新窗口的外观。可选择的窗口属性有很多种，当有多种控制需求时，将相关内容用一个字符串连接起来，其间用分号隔开。以下是可选择的属性种类：
o dialogHeight: sHeight
o dialogLeft: sXpos
o dialogTop: sYpos
o dialogWidth: sWidth
o center: ( yes | no | 1 | 0 | on | off )
o dialogHide: ( yes | no | 1 | 0 | on | off )
o edge: ( sunken | raised )
o help: ( yes | no | 1 | 0 | on | off )
o resizable: ( yes | no | 1 | 0 | on | off )
o scroll: ( yes | no | 1 | 0 | on | off )
o status: ( yes | no | 1 | 0 | on | off )
二、控制对话框大小和位置
三、改变对话框外观
四、从Noname1.html页面传递数据到Noname2.html页面
传递对象类型数据
-------Noname1.html------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>模态窗口传递对象</TITLE>
<script type="text/javascript" src="verify.js"></script>
<script language="javascript">
var sColor="yyyy";
var sName="xmddl369";
function showModalWindow(){
window.showModalDialog('Noname2.html',window,'dialogWidth:400px;dialogHeight:400px');
//do.....关闭模态窗口后会继续执行此行代码
}
function showModellessWindow(){
window.showModelessDialog('Noname2.html',window,'dialogWidth:400px;dialogHeight:400px;edge:sunken');
}
//也可上面的window换成元素对象eg:tid
function update()
{
oColor.innerText = sColor;
}
document.write("sColor="+sColor+"<br>");
document.write("sName="+sName+"<br>");
</script>
</HEAD>
<BODY>
<form>
<input type="text" name="tid" id="tid" value="">
<input type="button" name="button" value="打开一个模态窗口" onclick="showModalWindow()">
<input type="button" name="button" value="打开一个非模态窗口" onclick="showModellessWindow()">
<BR>
<P>输入你最喜欢的颜色: <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>
</form>
</BODY>
</HTML>
-------Noname2.html------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
function getInfoAndUpdate() {
var callerWindowObj = dialogArguments; //得到文档的引用
callerWindowObj.sColor = document.all("oEnterColor").value;
callerWindowObj.update();
}
function cancel() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = "Yellow";
callerWindowObj.update(); //调用父窗口的方法
}
</script>
</HEAD>
<BODY>
<form>
输入你最喜欢的颜色:<INPUT type="text" name="oEnterColor" ID="oEnterColor"><BR><BR>
<INPUT VALUE="Apply" TYPE=button onclick="getInfoAndUpdate();">
<INPUT VALUE="Ok" TYPE=button onclick="getInfoAndUpdate();window.close();">
<INPUT VALUE="Cancel" TYPE=button onclick="cancel();window.close();">
</form>
</BODY>
</HTML>
传递数组引用类型数据
-------Noname1.html------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript" src="verify.js"></script>
<script language="javascript">
var fruit=new Array();
fruit[0]="苹果";
fruit[1]="桔子";
fruit[2]="梨";
fruit[3]="香蕉";
function showModalWindow(){
window.showModalDialog('Noname2.html',fruit,'dialogWidth:400px;dialogHeight:400px');
}
function showModellessWindow(){
window.showModelessDialog('Noname2.html',fruit,'dialogWidth:400px;dialogHeight:400px;edge:sunken');
}
</script>
</HEAD>
<BODY>
<form>
<input type="button" name="button" value="打开一个模态窗口" onclick="showModalWindow()">
<input type="button" name="button" value="打开一个非模态窗口" onclick="showModellessWindow()">
<BR>
</form>
</BODY>
</HTML>
-------Noname2.html------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JScript">
function deWrite(){
var myobject=document.getElementById("ifruit");
var myfruit=dialogArguments;
for(count=0;count<myfruit.length;count++){
var oOption = document.createElement("OPTION");
oOption.text=myfruit[count];
oOption.value=/count;
myobject.add(oOption);
}
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<input type="button" name="button" value="click me" onclick="deWrite()">
<br>增加水果:
<SELECT ID="ifruit" NAME="ifruit">
</SELECT>
</form>
</BODY>
</HTML>
传递值类型数据
-------Noname1.html------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript" src="verify.js"></script>
<script language="javascript">
function showModalWindow(){
window.showModalDialog('Noname2.html',"xmddl",'dialogWidth:400px;dialogHeight:400px');
}
function showModellessWindow(){
window.showModelessDialog('Noname2.html',"xmddl369",'dialogWidth:400px;dialogHeight:400px;edge:sunken');
}
</script>
</HEAD>
<BODY>
<form>
<input type="button" name="button" value="打开一个模态窗口" onclick="showModalWindow()">
<input type="button" name="button" value="打开一个非模态窗口" onclick="showModellessWindow()">
<BR>
</form>
</BODY>
</HTML>
-------Noname2.html------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JScript">
function deWrite(){
var names=dialogArguments;//
document.write(names);
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<input type="button" name="button" value="click me" onclick="deWrite()">
</form>
</BODY>
</HTML>
分享到：
相关推荐
在网页设计中，模态窗口（Modal Window）是一种常见的用户交互设计模式，它可以在不离开当前页面的情况下显示新的内容或进行交互操作。JQuery，一个轻量级、高性能的JavaScript库，提供了简单易用的API来实现这种...
在 EasyUI 中，模态窗口（Modal Window）是一种常用的功能，用于展示弹出式对话框，通常用于输入数据、确认操作或者显示详细信息。在本篇文章中，我们将深入探讨 EasyUI 的模态窗口插件，包括其基本使用方法、配置...
【DIV模态窗口实现】是一种常见的前端网页设计技术，它允许在不离开当前页面的情况下，弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景，能够提供良好的用户体验，因为它...
在网页设计中，`div` 和 `css` 是构建页面布局和样式的重要工具，而模态窗口（Modal Window）则是用户界面设计中的一个常见元素。模态窗口是一种弹出式的对话框，它会覆盖住主页面，使得用户必须先与模态窗口交互...
在网页开发中，模态窗口是一种常见的用户界面元素，用于在不离开当前页面的情况下向用户展示信息或收集输入。本文将深入探讨如何使用HTML、CSS以及JavaScript创建和管理模态窗口，特别是针对Internet Explorer（IE）...
下面我们将详细探讨如何利用jQuery实现模态窗口，以及在描述中提到的"5个Jquery模态窗口"可能包含的具体内容。 1. **基本原理**： jQuery模态窗口通常通过CSS控制样式，JavaScript处理事件和行为来实现。基本思路...
在网页设计和开发中，模态窗口是一种常见的交互设计元素，它可以在用户当前操作的页面上弹出一个半透明的窗口，强制用户与其交互后才能继续进行其他操作。标题“层实现模态窗口(div)”表明我们将探讨如何使用HTML中...
### 模态窗口解决方案：全面解析与跨浏览器支持 在现代网页设计中，模态窗口（Modal Window）作为一种常见的交互模式，被广泛应用于各种场景，如登录框、弹出提示、对话框等。然而，不同浏览器对模态窗口的支持程度...
根据给定文件的信息，本文将围绕“分页后弹出模态窗口刷新父窗口”的主题进行深入探讨。此话题主要涉及前端开发中的交互设计、页面更新机制以及如何在不同的页面间进行数据同步等内容。 ### 一、理解分页与模态窗口...
在网页设计中，模态窗口（Modal Window）是一种常见的用户界面设计模式，它可以在当前页面上弹出一个半透明的对话框，强制用户与之交互后再继续操作。本资源主要探讨如何使用HTML `<div>` 元素来实现类似JavaScript...
模态窗口在软件开发中是一种常见的用户界面设计元素，它是一种特殊的窗口，当模态窗口出现时，用户必须先与该窗口交互，处理完其中的任务，才能继续操作应用程序的其他部分。这种窗口强制用户按照特定的流程进行操作...
JavaScript的模态窗口是网页开发中常用的一种交互设计，它可以在用户进行其他操作时暂停页面流程，强制用户关注特定信息或执行某个操作。模态窗口通常由一个覆盖在主页面上的半透明背景（通常称为“mask”）和一个...
### 模态窗口demo及说明 #### 一、概述 模态窗口是用户界面设计中的一个常见元素，它能够提供一种交互方式，使得用户在不离开当前页面的情况下完成某些特定任务或操作。本文将深入探讨如何使用JavaScript创建模态...
这是Visual Studio的MFC项目，展示了模态窗口、非模态窗口的使用。弹出模态窗口就会阻塞父窗口，并且展示了C++读取鼠标位置的方法。非模态窗口则不会阻塞父窗口。 主窗口展示了树控件的使用方法。
这是一个例子，告诉大家如何解决在 WPF 的软件，弹出一个模态窗口。使用另一个窗口在模态窗口前面。从任务栏打开模态窗口。关闭模态窗口。这时发现，主窗口会在刚才使用的另一个窗口下面
模态窗口通常用于确认操作、输入数据或者显示详细信息等场景。在【标题】"html 模态窗口子窗体调用父窗体的任何函数"中，我们将探讨如何在模态子窗口中实现对父窗口功能的调用。 模态子窗口通常由JavaScript或者...
模态窗口，也称为对话框或弹出窗口，在网页设计中是一种常见的用户界面元素，用于在主页面上显示额外信息，而不会完全中断用户的浏览体验。在这个“19种漂亮的模态窗口效果”中，我们可以预见到一系列使用jQuery实现...
在IT领域，透明非模态窗口作图是一种高级的用户界面设计技术，它涉及到图形用户界面（GUI）的实现和优化。在这个测试中，我们主要关注的是如何在窗口上进行透明处理，同时保持窗口的非模态特性，使得用户可以在同一...
在网页开发中，模态窗口（Modal Window）是一种常见的用户交互设计，用于显示与当前页面相关的临时信息或进行特定操作。这种窗口会阻止用户与背景页面的直接交互，直到模态窗口被关闭。当我们需要在用户关闭模态窗口...
模态窗口阻止了用户对页面其他部分的互动，直到用户关闭了模态窗口为止。 在"js弹出模态窗口"这个主题中，我们主要会涉及以下几个知识点： 1. **HTML结构**：模态窗口通常由HTML元素构建，包括一个主容器（一般...