ModalDialog 是什么？
showModalDialog 是js window对象的一个方法， 和window.open一样都是打开一个新的页面。
区别是： showModalDialog打开子窗口后，父窗口就不能获取焦点了（也就是无法操作了）。
可以在子窗口中通过设置 window.returnValue 的值，让父窗口可以获取这个return value.

一个例子
1)主窗口 main.html,
2)在主窗口中通过showModalDialog的方式打开子窗口sub.html
3)在子窗口中设置 returnValue返回给主窗口使用
main.html
[html] view plaincopy

<HTML>    
    <HEAD>    
    <META NAME="GENERATOR" Content="oscar999">    
    </HEAD>    
    <script>  
    function showmodal()  
    {  
      var ret = window.showModalDialog("sub.html?temp="+Math.random());  
      alert("sub return value is "+ret);  
    }  
    </script>  
    <BODY>    
    <INPUT id=button1 type=button value="open sub" name=button1 onclick="showmodal();">    
    </BODY>    
    </HTML>

sub.html
[html] view plaincopy

<HTML>    
    <HEAD>    
    <META NAME="GENERATOR" Content="oscar999">    
    </HEAD>    
    <script>  
    function returnMain()  
    {  
      window.returnValue = "return from sub";  
      window.close();  
    }  
    </script>  
    <BODY>    
    <INPUT id=button1 type=button value="return and close" name=button1 onclick="returnMain()">    
    </BODY>    
    </HTML>

特别说明： 在main.html中showModalDialog的方法时， 有使用到Math.random()的目的是避免缓存。

showModalDialog详细使用
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
 sURL
   必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
    vArguments
   可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
    sFeatures
   可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
    dialogHeight 对话框高度，不小于100px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　 dialogWidth: 对话框宽度。
　 dialogLeft: 距离桌面左的距离。
　 dialogTop: 离桌面上的距离。
　 center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　 resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
　 status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
    scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的，在一般的网页中一般不使用。
    dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
    edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
    unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

浏览器兼容
但是并不是所有浏览器对兼容这样的用法。
在Chrome中运行上面的例子的话， 父窗口可以任意获取焦点，效果和window.open一样， 而且获取的returnVale也是undefined.
以下是各主流浏览器对此方法的支持状况。
浏览器     是否支持     状态
IE9     ○     
Firefox13.0     ○     
safari5.1     ○     
chrome19.0     ×     并不是模态对话框，而是open了一个新窗体
Opera12.0     ×     什么也发生，连个窗体都不弹

如果有传入vArguments这个参数为window的话：
[javascript] view plaincopy

var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);

则在子窗口中，以下的值为：
浏览器     模态对话框     window.opener     window.dialogArguments     returnValue
 IE9      ○      undefined      [object Window]      ○
 Firefox13.0      ○      [objectWindow]      [object Window]      ○
 safari5.1      ○      [objectWindow]      [object Window]      ○
 chrome19.0      ×      [objectWindow]      undefined      ×

注意一下Firefox浏览器下，子窗体假如刷新的话window.dialogArguments照样会丢失，变成undefined。以上结果中我们可以看出返回值returnValue就只有chrome浏览器返回的是undefined，其他浏览器都没有问题

如何解决Chrome的兼容问题。
方向是： 设置window.opener.returnValue=""
main.html

<HTML>    
    <HEAD>    
    <META NAME="GENERATOR" Content="oscar999">    
    </HEAD>    
    <script>  
    function showmodal()  
    {  
      var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);  
      //for Chrome  
      if(ret==undefined)  
      {  
        ret = window.returnValue;  
      }  
      alert("sub return value is "+ret);  
    }  
    </script>  
    <BODY>    
    <INPUT id=button1 type=button value="open sub" name=button1 onclick="showmodal();">    
    </BODY>    
    </HTML>

sub.html

<HTML>    
    <HEAD>    
    <META NAME="GENERATOR" Content="oscar999">    
    </HEAD>    
    <script>  
    function returnMain()  
    {  
      if(window.opener!=undefined)  
      {  
        window.opener.returnValue = "return from sub";   
      }else{  
        window.returnValue = "return from sub";  
      }  
      window.close();  
    }  
    </script>  
    <BODY>    
    <INPUT id=button1 type=button value="return and close" name=button1 onclick="returnMain()">    
    </BODY>    
    </HTML>

这里是判断某些对象是否为defined来区分浏览器。当然，也可以判断浏览器的类型的方式进行
http://blog.csdn.net/oscar999/article/details/8272798

这里是借用了父窗口的returnValue来使用， 如果父窗口的returnValue也用其他用途是可以使用替换的方式进行了， as：
var oldValue  = window.returnValue;
var newValue = showModalDialog()
window.returnValue = oldValue

需要特别注意的是，  Chrome下的测试需要把html 文件放入到web server(Tomcat,...)下通过http url 访问测试。否则就不成功了。

window.showDialog()兼容性处理的更多相关文章

  1. window.open和window.showdialog区别

    open打开的窗口可以点击切换到其背后的父窗口,dialog的窗口无法点击切换到其背后的父窗口, 假如用window.opener或者parent等对象时,建议用open方法,不要用dialog,否则 ...

  2. wpf window set window的owner

        [DllImport("user32.dll")]   public static extern IntPtr GetAncestor(IntPtr hWnd, int f ...

  3. 关闭 Window 之后，无法设置 Visibility，也无法调用 Show、ShowDialogor 或 WindowInteropHelper.EnsureHandle。

    参考网址: 1.WPF Tips: Window.ShowDialog()方法:Cannot set Visibility or call Show, ShowDialog, or WindowInt ...

  4. WPF：window设置单一开启

    方法一: Window window = new Window();window.ShowDialog; 方法二: 设置一个判断窗口打开状态的全局控制变量         private bool i ...

  5. 2000条你应知的WPF小姿势 基础篇<78-81 Dialog/Location/WPF设备无关性>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...

  6. JavaScript事件概览

    JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...

  7. 【笔记】JS基础一

    名词解释 ECMAScript 翻译器,解释器 DOM 文档对象模型 Document Object Model 例如 document BOM 浏览器对象模型 Browser Object Mode ...

  8. MVVM模式下弹出窗体

    原地址:http://www.cnblogs.com/yk250/p/5773425.html 在mvvm模式下弹出窗体,有使用接口模式传入参数new一个对象的,还有的是继承于一个window,然后在 ...

  9. WPF+Caliburn.Micro 杂记

    开发过程中的小问题总结 1DataGrid的Header里面给Checkbox绑定IsEnabled,绑不上去.  2由A页面跳转到B页面,再由B页面返回一个值 3DataGrid里面的行通过一个方法 ...

随机推荐

  1. 数据结构——左高树

    一.扩充二叉树 考察一棵二叉树,它有一类特殊的节点叫做外部节点( external node),用来代替树中的空子树,其余节点叫做内部节点( internal node).增加了外部节点的二叉树被称为 ...

  2. SQL 用中文的拼音和笔画排序

    SQL 用中文的拼音和笔画排序   城市按拼音排序: SELECT chineseName FROM [表名] order by chinesename collate Chinese_PRC_CS_ ...

  3. 0119——UITextField

    1.默认文本  _loginTextField.placeholder = @"QQ号/手机"; 2.设置边框 _loginTextField.borderStyle = UITe ...

  4. 使用Unity在MVC上实现动态注入

    一.前言 通过前一篇的文章介绍使用unity轻量级的依赖注入容器,本文就介绍在MVC上使用unity依赖注入控制器和控制器中的日志属性. 实现MVC中新提供 的两个接口:IDependencyReso ...

  5. BZOJ 2882 工艺 （字符串最小循环同构）

    题目大意: 给一个长度小于等于30W的数列,求其最小循环同构. 算法讨论: 在自动机长倍长走S后即可.注意这里面是数字,要用map存储. 今天才知道要开四倍长. Codes: #include < ...

  6. Java—Integer类

    Integer类 Integer 类在对象中包装了一个基本类型 int 的值.Integer 类型的对象包含一个 int 类型的字段. 该类提供了多个方法,能在 int 类型和 String 类型之间 ...

  7. java中的IO流读取文件

    1 InputStream类和OutputStream类 InputStream.read()方法从文件中读取一个字节(0-255),然后将此字节转换成对应的整数返回.假设一个文件的编码为utf-8编 ...

  8. WordPress主题制作全过程

    前言: 我想大多数使用WordPress的朋友都喜欢去尝试新的主题,但是换来换去,总是找不到那么一款适合自己的,让人很郁闷.于是很多人萌生了修改现有主题或自己动手从头制作一个主题的想法,但是问题又来了 ...

  9. Win 10 、Win 8 系统默认字体如何修改为宋体

    Win 10 字体改为宋体方法:新建一个文本文档txt,将如下代码复制进去:Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWA ...

  10. perl 爬取csdn

    <pre name="code" class="python">use LWP::UserAgent; use POSIX; use HTML::T ...