`

open,showModalDialog,showModelessDialog 区别

 
阅读更多

1.showModalDialog

大部分浏览器已支持showModalDialog函数,我们叫它为模态对话框,它有个好处是打开之后会始终保持输入焦点,在关闭它之前父窗体是无法获取焦点,这可以阻塞用户的操作等待返回,代码如下:

function openModalDialog(){ var vReturnValue = window.showModalDialog('http://www.google.com/' ,'' ,'dialogHeight=400px; dialogWidth=600px; center=yes; resizable=yes; status=yes'); alert('ReturnValue:'+vReturnValue); }

2.showModelessDialog

showModelessDialog方法打开的窗体为非模态对话框,与showModalDialog模态对话框不同的是用户可以随便切

换输入焦点,因此它不会阻塞线程等待返回结果,代码如下:

function openModelessDialog(){ var vReturnValue = window.showModelessDialog('http://www.baidu.com/' ,'' ,'dialogHeight=400px; dialogWidth=600px; center=yes; resizable=yes; status=yes'); alert('ReturnValue:'+vReturnValue); }

3.open

window.open可能是我们使用得最多了,它用4个可选的参数:URL,name,features,replace,name用作标记

<a> 和 <form> 的属性 target 的值,如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建

一个新窗口,而只是返回对指定窗口的引用。features参数为窗口特征,replace为是否替换浏览历史中的当前条

目的布尔值。代码如下:

function openWindow() { window.open("http://www.google.com/","","height=400px, width=600px, menubar=yes, scrollbars=yes, toolbar=yes, status=yes, location=yes"); }

4.兼容性

showModalDialog、showModelessDialog和open兼容性最好的是open方法了,这主要因为在W3C标准

里Window 对象方法找不到showModalDialog和showModelessDialog,大部分标准浏览器和IE都支持

window.open,而前面我说到大部分浏览器也支持showModalDialog函数,那是不完全支持。比如FF在

3.0开始才支持showModalDialog(FF2.0是不支持的),chrome浏览器支持但却没有实现

showModalDialog模态对话框的效果(形同使用window.open),而showModelessDialog可能是

因为用处少,除IE外几乎都不支持,Safari和Opera则是墙头草两边倒。

5.open模拟showModalDialog

正是由于这些兼容性问题,所以我们一般放弃使用这些方法而自己重新实现,例如我们一般会在页面使用模拟弹窗层的办法,前几天在做一项目时用到了window.open方法,突然想到能否用open模拟showModalDialog效果,发现一小伎俩,代码如下:

function openSimulateModalDialog(){ window.newWindow = window.open("http://www.baidu.com/","","height=400px, width=600px, menubar=yes, scrollbars=yes, toolbar=yes, status=yes, location=yes"); } document.body.onclick=function (){ if(window.newWindow && window.newWindow.focus){ newWindow.focus(); } }

目前脚本在IE和chrome里还有点小问题,同时也没有真正实现showModalDialog效果,

因为没办法阻塞线程等待返回,同时并非主窗体在子窗体关闭前无法获取焦点,只是在click时判断是否有打开

窗体,有则打开窗体强制获取焦点。

6.小结

虽然没能使用window.open完全实现showModalDialog效果,但有时候觉得想法很重要,故出此文。

open,showModalDialog,showModelessDialog 区别 以前对showModalDialog、showModelessDialog和open的参数也有点模糊,这里也当是总结。

分享到:
评论

相关推荐

    window.showModalDialog以及window.open用法简介

    Window.showModalDialog 和 Window.open 用法简介 Window.showModalDialog 和 Window.open 都是 JavaScript 中的方法,用于创建新窗口或对话框,下面分别介绍它们的用法和参数。 一、Window.open() 方法 Window....

    showModelessDialog使用详解

    #### 二、`showModalDialog()`与`showModelessDialog()`的区别 - **`showModalDialog()`**:此方法创建一个模态对话框,用户必须关闭该对话框才能继续操作主窗口。它类似于弹窗,直到用户进行操作前,主窗口的操作...

    js的window.showModalDialog及window.open用法实例分析

    总结来说,`window.open`适合创建非阻塞的新窗口,而`window.showModalDialog`和`window.showModelessDialog`则用于创建具有特定交互模式的对话框。选择哪个方法取决于应用的具体需求,比如是否需要用户在完成对话框...

    showModelessDialog()使用详解

    如: showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的...

    浅谈JavaScript窗体Window.ShowModalDialog使用

    总的来说,`window.showModalDialog()`和`window.showModelessDialog()`是JavaScript中较老的弹出对话框技术,它们提供了对对话框外观和行为的控制,但在现代Web开发中,由于浏览器兼容性和可访问性问题,已被其他...

    JavaScript中window.showModalDialog()用法详解

    今天在项目中用到了弹出子窗口,就想到了用JavaScript实现的两种方法,一个是window.open();一个是window.showModalDialog()方法,后者是存在父子关系的一种弹出窗口,只有子窗关闭,父窗口才激活,并且可以传送参数...

    javascript网页对话框.pdf

    本文主要关注JavaScript中的两种弹出窗口技术:`window.open`和`window.showModalDialog`/`window.showModelessDialog`。 首先,`window.open`是JavaScript中最常见的用于打开新窗口的方法。它接受三个参数:`url`...

    ShowDialog的使用心得

    这里提到的`ShowDialog`实际上是指通过JavaScript中的`window.open()`方法及Internet Explorer特有的`window.showModalDialog()`和`window.showModelessDialog()`方法来实现的。下面将详细介绍这些方法的具体用法...

    javascript网页对话框.docx

    本文将深入探讨JavaScript中用于创建对话框的两种主要方法:`window.open`和`showModalDialog()`、`showModelessDialog()`。 首先,我们来看`window.open`函数。这个函数用于在新的浏览器窗口中打开一个页面,其...

    C#跳转网页7种方法

    对于showModalDialog和showModelessDialog的区别,showModalDialog提供了一个阻塞式对话,直到关闭对话框才能继续操作主窗口;而showModelessDialog允许用户在对话框与主窗口之间自由切换。若希望这两个方法的链接不...

    html 模态窗口使用

    尽管`window.showModalDialog()`和`window.showModelessDialog()`为IE提供了一种创建模态和非模态对话框的简便方法,但考虑到IE的市场份额不断下降以及对现代Web标准的支持不足,开发者应考虑使用更广泛的跨浏览器...

    父子页面相互调用总结

    本文将深入探讨四种主要的方法:`showModelessDialog`、`window.open`、`showModalDialog`以及`iframe`,来实现这样的交互。 首先,我们来看`showModelessDialog`,这是一个在Internet Explorer浏览器中特有的API,...

    ASPNET跳转网页7种方法

    对于 `showModalDialog` 和 `showModelessDialog`,它们的主要区别在于: - `showModalDialog` 提供阻塞式体验,用户必须先处理对话框,不能与主窗口交互。 - `showModelessDialog` 允许用户在对话框和主窗口间自由...

    javaScript聊天窗口

    JavaScript 提供了多种方式来创建弹出窗口,其中最常见的两种方法是 `window.open()` 和 `window.showModalDialog()` 及 `window.showModelessDialog()` 方法。 ##### 2.1 `window.open()` `window.open()` 方法...

    ASP.NET打开新页面

    `showModelessDialog`和`showModalDialog`方法可以分别创建非模态和模态对话框,前者允许用户在对话框打开时继续与原页面交互,而后者则会阻止用户与原页面的其他部分互动,直到对话框关闭。 #### 注册自定义客户端...

    JS 常用代码集合

    JavaScript还提供了两种特殊的对话框函数,`showModalDialog()`和`showModelessDialog()`,它们创建的对话框具有更多的交互性和控制性。`showModalDialog()`打开的窗口是模式化的,这意味着用户必须关闭对话框才能...

    弹出网页窗口设计全攻略

    以上就是网页弹出窗口设计的一些基本技巧和方法,包括`window.open()`、`showModalDialog()`、`showModelessDialog()`以及HTA的应用。熟练掌握这些技术,可以极大地提升网页的交互性和用户体验。在实际应用中,...

    弹出窗口总汇集

    根据给定的文件信息,我们...通过`window.open`、`showModalDialog`、`showModelessDialog`以及HTA,开发者可以根据具体需求灵活地控制弹出窗口的样式和行为。掌握这些技巧对于创建功能丰富且用户友好的网站至关重要。

    javascript弹出对话框总结

    2. **浏览器兼容性**:`showModalDialog()`和`showModelessDialog()`仅在Internet Explorer中有效,其他现代浏览器并不支持这些方法。 3. **用户体验**:频繁地弹出对话框可能会干扰用户的操作流程,降低用户体验,...

    ajax实现弹出窗口代码大全

    利用AJAX技术结合`window.open()`、`showModalDialog()`和`showModelessDialog()`等方法,开发者能够轻松实现在网页中弹出窗口的功能。掌握这些技巧对于构建动态、响应迅速且用户友好的网站界面至关重要。无论是展示...

Global site tag (gtag.js) - Google Analytics