`
touchmm
  • 浏览: 1037112 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JS + ShowModalDialog模态窗口

JSP 
阅读更多


关于window.showModalDialog()打开模态窗口的使用方法。备忘。


一、使用方法
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])


二、参数说明

sURL -- 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments -- 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures -- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

----------------

1. dialogHeight: 对话框高度,不小于100px
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.在showModalDialog和showModelessDialog窗口中,点击超连接不弹出新窗口,在<head>中加上如下语句:

<base target="_self">


2.在showModalDialog窗口中,使用location.href="test.jsp"语句,会打开新窗口显示新页面,可以使用如下语句代替:

<script>
window.name="targetSelf";
window.open("test.jsp","targetSelf");
</script>


3.在showModalDialog窗口中,提交数据而不打开新窗口,需要指定window.name,语句如下:

window.name="targetName";
function postData(){
var aform = document.forms[0];
aform.action = url;
aform.target="targetName";
aform.submit();
}

另外,一种解决方式是使用iframe。


4.鼠标拖动showModalDialog窗口,使其大小可变,其参数形式如下(供参考):

window.showModalDialog(url,"1","edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes; dialogWidth=1100px;dialogHeight=655px");

四、参数传递:

1. 对showModalDialog窗口传递参数,是通过vArguments参数来传递的。

类型不限制,对于字符串类型,最大为4096个字符。

也可以传递对象,例如:

-------------------------------
parent.htm
<script>
var obj = new Object();
obj.name="test";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>

modal.htm
<script>
var obj = window.dialogArguments;
alert("您传递的参数为:" + obj.name);
</script>
-------------------------------


2.在showModalDialog窗口中,使用window.returnValue可向父窗口返回信息,也可以返回对象。

例如:

------------------------------
parent.htm
<script>
str =window.showModalDialog("modal.htm","1","dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>

modal.htm
<script>
window.returnValue=1;
window.close();
</script>
------------------------------

by JRQ

2010/01/26夜 南昌

分享到:
评论

相关推荐

    使用selenium测试showModalDialog模态对话框

    这段代码首先定义了一个JavaScript字符串,用于重写 `showModalDialog` 方法,将其替换为 `window.open` 函数,这样对话框将以非模态窗口的形式打开,Selenium 就可以继续执行并选中这个新窗口。然后,代码模拟点击...

    html 模态窗口使用

    本文将深入探讨如何使用HTML、CSS以及JavaScript创建和管理模态窗口,特别是针对Internet Explorer(IE)浏览器中特有的`window.showModalDialog()`和`window.showModelessDialog()`方法。 #### HTML模态窗口概述 ...

    javascript调用的模态窗口

    "javascript调用的模态窗口"是指使用JavaScript来创建或控制的一种弹出式窗口,这种窗口在显示时会阻止用户对父窗口的交互,直到用户关闭了模态窗口。这个功能在很多场景下都非常实用,比如表单验证、用户提示或者...

    模态窗口解决方案

    1. **原生JavaScript**:使用`window.showModalDialog()`函数是早期实现模态窗口的一种方式,但它只在IE浏览器中可用。该方法接受三个参数:模态窗口的URL、父窗口对象和窗口属性字符串。然而,此方法在非IE浏览器中...

    javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码

    总结来说,`javascript showModalDialog`在多层模态窗口的实现中,主要依赖于`window.name`、`window.open`和`returnValue`这三个关键点。通过正确使用这些特性,我们可以创建出交互复杂的多层模态窗口,并实现页面...

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

    - 给定代码中的`window.showModalDialog`函数就是用来弹出模态窗口的。该函数接收三个参数:模态窗口的URL、调用者的窗口对象以及窗口的配置选项。 ### 二、实现逻辑分析 #### 1. 模态窗口弹出逻辑 - `function ...

    模态窗口demo及说明

    本文将深入探讨如何使用JavaScript创建模态窗口,并通过具体的代码示例来解释各种相关方法和属性。 #### 二、模态窗口的基础概念 模态窗口(Modal Window)是一种弹出式窗口,当其出现时会阻止用户与背后的应用...

    ASP.NET模态窗口的实现

    在 ASP.NET 中,实现模态窗口可以通过使用 `showModalDialog` 和 `showModelessDialog` 两个方法。这些方法可以用来创建一个显示 HTML 内容的模态或非模态对话框。 showModalDialog 方法 `showModalDialog` 方法...

    showModalDialog模态对话框的使用详解以及浏览器兼容

    `showModalDialog`是JavaScript `window`对象的一个方法,它用于打开一个新的模态对话框,与`window.open`相似但有所不同。主要的区别在于,当使用`showModalDialog`打开一个子窗口时,父窗口会失去焦点,用户无法与...

    模态窗口和非模态窗口

    在JavaScript编程中,模态窗口和非模态窗口是两种重要的交互方式,它们用于与用户进行更复杂的交互,提供信息或获取用户输入。模态窗口强制用户先处理该窗口,而不能与页面其他部分交互,直到关闭为止。非模态窗口则...

    JS--的模态窗口应用

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

    Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    `showModalDialog`方法在Web开发中常用于创建一个模态窗口,使得用户必须先关闭该对话框才能与父窗口交互。然而,Chrome浏览器在某些版本中对`showModalDialog`的实现与其它浏览器不同,导致了模态对话框的行为异常...

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

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

    showModalDialog刷新窗口的例子

    在IT行业中,尤其是在Web开发领域,`showModalDialog`是一个重要的JavaScript函数,它用于打开一个模态对话框,即在用户与新窗口交互时,主窗口会被暂时禁用。这个功能在需要用户输入额外信息或者确认操作时非常有用...

    HTML模态窗口

    模态窗口可以通过调用`window.showModalDialog()`方法来打开。此方法接受三个参数: - **url**:表示要加载的模态窗口HTML页面的URL。 - **arguments**:表示传递给模态窗口的参数。 - **features**:表示模态窗口的...

    javascript showModalDialog模态对话框使用说明

    JavaScript 的 showModalDialog 方法是一个在老旧浏览器中广泛使用的函数,用于打开一个模态对话框。然而,值得注意的是,随着Web技术的发展,showModalDialog 方法的支持度已经逐渐减少,特别是现代浏览器如Chrome...

    供模态窗口调用的页面模板(asp)

    js调用模态窗口的asp页面模板。调用示例: var vmyasp="abc.asp?id="+id; var vbt1="页面窗口title"; var vbt2="附加的title"; var myretu=window.showModalDialog("mywindow.asp?bt1="+escape(vbt1)+"&bt2;="+...

    JS模态窗口返回值兼容问题的完美解决方法

    模态窗口可以通过多种方式实现,其中使用JavaScript(JS)的showModalDialog方法是比较常见的一种。但是,由于不同浏览器的实现差异,模态窗口的返回值在跨浏览器时常常会遇到兼容性问题。下面我们将详细探讨如何...

    模态窗口,在IE下是模态,在FF下不是模态,作了最大的努力来实现通用

    2. **自定义JavaScript实现**:如果不想依赖外部库,可以编写自定义的模态窗口实现,使用CSS来控制视觉效果,JavaScript处理用户交互和阻塞页面其他部分。 3. **检测浏览器特性**:使用`feature detection`技术,如...

Global site tag (gtag.js) - Google Analytics