zoukankan      html  css  js  c++  java
  • JS中showModalDialog 详细使用

     基本介绍:
              showModalDialog()         (IE 4+ 支持)
              showModelessDialog()      (IE 5+ 支持)
              window.showModalDialog()                  方法用来创建一个显示HTML内容的模态对话框。
              window.showModelessDialog()             方法用来创建一个显示HTML内容的非模态对话框。
    使用方法:
              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. 要想对话框传递参数,是通过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://homepage.yesky.com";
    </script>

    常见技巧:

    一、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口?
      在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<head>之间的。

    二、怎样才刷新showModalDialog和showModelessDialog里的内容?
      在showModalDialog和showModelessDialog里是不能按F5刷新的,又不能弹出菜单。这个只能依靠

    javascript了,以下是相关代码:

    <body onkeydown="if (event.keyCode==116){reload.click()}">
    <a id="reload" href="filename.htm" style="display:none">reload...</a>

      将filename.htm替换成网页的名字然后将它放到你打开的网页里,按F5就可以刷新了,注意,这个要

    配合<base target="_self">使用,不然你按下F5会弹出新窗口的。

    三、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
      <input type="button" value="关闭" onclick="window.close()">
      也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。

    四、Math.random与showModalDialog。

       当你设置的弹出网页固定时(如上面的"modal.htm"页面),ie很可能到临时文件区,下载上次产生的该页面(openPage.html),而没有重新加载,

       对于动态加载的页面来说,这样往往产生误会,如没有及时更新数据,也就更不利于开发者测试。所以,你可以采用如下方式:

          var strPage = “/medal.htm?random="+Math.random();

       这样每次产生的strPage是不一样的,原因也就不言自明了。

    下面举两个例子

    一、返回一个字符串

    首先是父页面有个按钮,用来打开Modal页面userList.aspx

    复制代码
     function openWin()
        {
             str =window.showModalDialog("userList.aspx",window,"status:0;help:0;edge:sunken;dialogWidth=700px;dialogHeight=400px");

            if(str!=undefined && typeof(str)!=undefined && str!="undefined" && str!="")
            {
              document.getElementById("txtuserid").value=str;
            }else
            {
             document.getElementById("txtuserid").value="";
            }
        }
    复制代码

    str就是子页面返回过来的数据,我们把它添加到父类的一个表单元素中

    子页面

        function getValue()
            {          
             var selectValue=$(":radio:checked").val();
             window.returnValue=selectValue;
             window.close();
            }

    在这里我们把子页面里的值返回到父页面里就可以了,然后关闭页面就可以了

    二、返回一个数据

    父页面

    复制代码
         function openWin()
         {
     
            array =window.showModalDialog("demo2.aspx",window,"status:0;help:0;edge:sunken;dialogWidth=700px;dialogHeight=400px;scroll:no");
           
              document.getElementById("username").value=array[0];
              document.getElementById("sex").value=array[0];
             
         
        }
    复制代码

    子页面

    复制代码
       function getValue()
           {
             var array=new Array();
             
             array[0]=document.getElementById("username").value;
             Array[1]=document.getElementById("sex").value;
             window.returnValue=array;
             window.close();
           }
    复制代码

    返回一个数组就可以了,如果用open打开的话,在搜狗或者360浏览器打开的是一个页面或者阻拦什么的

     前段时间在后台使用JS的winodw.showModalDialog来查看静态页面内容,发现不能及时显示更新后的页面内容,用open打开有时也会出现这种问题

    解决办法 
      window.showModalDialog(getUrl+"?Rnd="+Math.random(),"","dialogWidth:600px;dialogHeight:400px;help:no;scroll:yes;center:yes;status:no;");
    这样就不会有缓存了

    多思考,多创新,才是正道!
  • 相关阅读:
    Html禁止粘贴 复制 剪切
    表单标签
    自构BeanHandler(用BeansUtils)
    spring配置中引入properties
    How Subcontracting Cockpit ME2ON creates SD delivery?
    cascadia code一款很好看的微软字体
    How condition value calculated in sap
    Code in SAP query
    SO Pricing not updated for partial billing items
    Javascript learning
  • 原文地址:https://www.cnblogs.com/zhangxiaolei521/p/5702348.html
Copyright © 2011-2022 走看看