读书人

showModalDialog模态对话框的施用以及

发布时间: 2012-12-14 10:33:08 作者: rapoo

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


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

    一个例子
    1)主窗口 main.html,
    2)在主窗口中通过showModalDialog的方式打开子窗口sub.html
    3)在子窗口中设置 returnValue返回给主窗口使用
    main.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 访问测试。否则就不成功了。

读书人网 >Web前端

热点推荐