`

showModalDialog参数使用详解

阅读更多

 

showModalDialog:模式窗口,  一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法.
   
   使用方法:  
   vReturnValue    =    window.showModalDialog(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>

用window.showModalDialog 或者window.showModelessDialog打开一个模式窗口后,和父窗口的一些交互问题。
要进行交互操作的前提,在调用showModalDialog或者showModelessDialog方法的时候,第二个参数传window,如:


window.showModelessDialog('filename.htm',window,'dialogWidth=200px;dialogHeight=250px;')

 

接下来,就是取得父窗口的一些数据和方法,这是经常会用的,父窗口取子窗口的参数一般通过returnValue就可以搞定了~


//取得父窗口的JS变量 var
window.dialogArguments.var;
//获得父窗口的对象和属性
window.dialogArguments.form1.name.value ;
//调用父窗口的方法 fun
window.dialogArguments.fun() ;

 


但是有个问题,在子窗口中的事件响应无法调用父窗口的方法,


<button onClick='window.dialogArguments.fun()'>调父窗口方法</button>

 

注,执行上面的方法的时候,窗口会停止响应

分享到:
评论

相关推荐

    showModalDialog参数详解

    showModalDialog参数详解 基本介绍: showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()...

    showModalDialog和showModelessDialog使用心得

    ### showModalDialog和showModelessDialog使用心得:深入解析与实践 在Web开发中,`showModalDialog` 和 `showModelessDialog` 是两种用于创建弹出窗口的方法,它们各自具有独特的特性和应用场景。本文将详细解析这...

    js showModalDialog参数的使用详解

    JavaScript中的`...然而,需要注意的是,由于其在不同浏览器之间的兼容性问题,以及现代Web开发倾向于使用更灵活的弹出层库(如Bootstrap的Modal组件),`showModalDialog`在现代Web应用中的使用已逐渐减少。

    JS中showModalDialog 的使用解析.docx

    在JavaScript中,`showModalDialog`是一个非常有用的函数,它允许开发者创建模态对话框来增强用户交互体验。模态对话框是一种特殊的...在开发过程中,应根据项目需求和目标浏览器范围来决定是否使用`showModalDialog`。

    showModalDialog及dialogArguments使用

    #### sFeatures 参数详解 `sFeatures` 参数可以包含以下属性,用分号分隔: 1. **dialogHeight**: 对话框的高度,单位为像素(px)。 2. **dialogWidth**: 对话框的宽度,单位为像素(px)。 3. **dialogLeft**: ...

    JS中showModalDialog 的使用解析

    与`showModalDialog`的参数类似,只是对话框的行为不同。 ### 参数传递 在对话框中传递参数是通过`vArguments`实现的。例如,在父窗口中,可以将一个对象、字符串或其他值赋给`vArguments`,然后在子窗口的...

    JS中showModalDialog 详细使用.txt

    ### JS中的`showModalDialog`与`showModelessDialog`详解 #### 一、概述 在JavaScript中,`showModalDialog` 和 `showModelessDialog` 是两种用于创建弹出窗口的方法,主要用于显示HTML内容。这两种方法都是...

    Window.ShowModalDialog使用手册

    ### 使用Window.ShowModalDialog与Window.ShowModelessDialog在JavaScript中的详解 #### 一、引言 在Web开发中,为了实现更加丰富的用户交互体验,开发者经常需要创建模态或非模态对话框来显示特定的信息或者请求...

    showModalDialog详解

    在此,我们将深入探讨`showModalDialog`的用法、参数以及它在现代Web开发中的地位。 `showModalDialog`的基本语法如下: ```javascript var returnVal = window.showModalDialog(url, startingValue, features); `...

    ShowModalDialog与window.open的区别

    `ShowModalDialog` 是一个非标准但广泛使用的函数,用于打开模态对话框。模态对话框是指打开后会阻止用户与主页面进行任何交互的窗口,直到该对话框被关闭为止。 **2. 使用方法** ```javascript var returnValue =...

    window.showModalDialog参数传递中含有特殊字符的处理方法

    在这个特定的情况下,`escape` 函数成功地解决了问题,使得参数能够完整地传递到`window.showModalDialog`中。 需要注意的是,`escape` 函数并不适用于所有情况,因为它不会编码某些字符,比如字母、数字和一些特定...

    showModalDialog用法

    #### 二、参数详解 1. **URL**:这是必须指定的参数,表示要打开的新窗口的地址或HTML文档的路径。 2. **Arguments**:这是一个可选参数,可以向新窗口传递数据。在新窗口中,可以通过`window.dialogArguments`...

    window.showModalDialog的基本用法

    #### 特征参数详解 - **dialogHeight**: 对话框的高度,默认单位为像素(px),对于模态对话框也可以使用 em 单位。 - **dialogWidth**: 对话框的宽度,默认单位为像素(px)。 - **dialogLeft**: 对话框在屏幕上的...

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

    主要的区别在于,当使用`showModalDialog`打开一个子窗口时,父窗口会失去焦点,用户无法与父窗口进行交互,直到关闭子窗口。这种方式确保了用户在处理子窗口内容时不会被其他窗口干扰。 ### 1. `showModalDialog`...

    window.showModalDialog(javascript)

    【window.showModalDialog() 方法详解】 在Web开发中,JavaScript提供了两种对话框方式来与用户交互,即模态对话框和非模态对话框。本文将重点介绍模态对话框的使用方法`window.showModalDialog()`。 模态对话框是...

    Window.ShowModalDialog使用手册_对话框 .txt

    #### 四、参数详解 1. **sURL** - 描述:指定对话框中要加载的HTML文档的URL。 - 示例:`"http://example.com/dialog.html"`。 2. **vArguments** - 描述:向对话框传递的数据对象。 - 示例:`{ name: "John...

    JS 弹出对话框window.showModalDialog()

    ### JS弹出对话框 `window.showModalDialog()` 的使用与详解 #### 一、`window.showModalDialog()` 概述 在JavaScript中,`window.showModalDialog()` 是一个非标准但广泛使用的API,用于创建模态对话框。模态...

Global site tag (gtag.js) - Google Analytics