zoukankan      html  css  js  c++  java
  • showModalDialog和showModelessDialog使用心得

    一、showModalDialog和showModelessDialog有什么不同? 
      showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。 
      showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P) 
    二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口? 
      在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。 
    三、怎样才刷新showModalDialog和showModelessDialog里的内容? 
      在showModalDialog和showModelessDialog里是不能按F5刷新的,又不能弹出菜单。这个只能依靠javascript了,以下是相关代码: 
    <body > 
    <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="关闭" > 
      也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。 
    五、showModalDialog和showModelessDialog数据传递技巧。 
      (作者语:本来想用一问一答形式来写的,但是我想不出这个怎么问,所以只好这样了。) 
      这个东西比较麻烦,我改了好几次了不是没办法说明白(语文水平越来越差了),只好用个例子说明了。 
      例子: 
        现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name 
          一般的传递方式: 
            window.showModalDialog("filename.htm",var_name) 
            //传递var_name变量 
          在showModalDialog(或showModelessDialog)读取和设置时: 
            alert(window.dialogArguments)//读取var_name变量 
            window.dialogArguments="oyiboy"//设置var_name变量 
        这种方式是可以满足的,但是当你想在操作var_name同时再操作第二个变理var_id时呢?就无法再进行操作了。这就是这种传递方式的局限性。 
         
          以下是我建议使用的传递方式: 
            window.showModalDialog("filename.htm",window) 
            //不管要操作什么变量,只直传递主窗口的window对象 
          在showModalDialog(或showModelessDialog)读取和设置时: 
            alert(window.dialogArguments.var_name)//读取var_name变量 
            window.dialogArguments.var_name="oyiboy"//设置var_name变量 
            同时我也可以操作var_id变量 
            alert(window.dialogArguments.var_id)//读取var_id变量 
            window.dialogArguments.var_id="001"//设置var_id变量 
            同样还可以对主窗口的任何对象进行操作,如form对象里的元素。 
            window.dialogArguments.form1.index1.value="这是在设置index1元素的值" 
    六、多个showModelessDialog的相互操作。 
      因为光说很费劲,我就偷点懒,直接用代码来说了,如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。 
      以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。 
      主文件的部份js代码。 
      var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px") //打开控制窗口 
      var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px")  //打开被控制窗口 
      控制.htm的部份代码。 
      <script> 
        //操作位置数据,因为窗口的位置数据是"xxxpx"方式的,所以需要这样的一个特殊操作函数。 
    function countNumber(A_strNumber,A_strWhatdo) 

      A_strNumber=A_strNumber.replace('px','') 
      A_strNumber-=0 
      switch(A_strWhatdo) 
      { 
      case "-":A_strNumber-=10;break; 
      case "+":A_strNumber+=10;break; 
      } 
      return A_strNumber + "px" 

      </script> 
      <input type="button"  value="上移"> 
      <input type="button"  value="左移"> 
      <input type="button"  value="右移"> 
      <input type="button"  value="下移"> 
      以上关键部份是: 
        窗口命名方式:var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px") 
        变量访问方式:window.dialogArguments.s2.dialogTop 
      这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能,通过这个原理,在showModelessDialog之间相互控制各自的显示页面,传递变量和数据等。这要看各位的发挥了。 


    javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如: 
      showModalDialog() (IE 4+ 支持) 
       showModelessDialog() (IE 5+ 支持) 

    window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。 
    window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 
    当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。 
    使用方法如下: 
    vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) 
    vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures]) 
    参数说明: 
    sURL 
    必选参数,类型:字符串。用来指定对话框要显示的文档的URL。 
    vArguments 
    可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 
    sFeatures 
    可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 
    dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。 
       dialogWidth: 对话框宽度。 
       dialogLeft: 距离桌面左的距离。 
       dialogTop: 离桌面上的距离。 
       center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。 
       help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。 
       resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认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。 
    传入参数: 
    要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如: 
    test1.htm 
    ==================== 
    <script> 
    var mxh1 = new Array("mxh","net_lover","孟子E章") 
    var mxh2 = window.open("about:blank","window_mxh") 
    // 向对话框传递数组 
    window.showModalDialog("test2.htm",mxh1) 
    // 向对话框传递window对象 
    window.showModalDialog("test3.htm",mxh2) 
    </script> 
    test2.htm 
    ==================== 
    <script> 
    var a = window.dialogArguments 
    alert("您传递的参数为:" + a) 
    </script> 
    test3.htm 
    ==================== 
    <script> 
    var a = window.dialogArguments 
    alert("您传递的参数为window对象,名称:" + a.name) 
    </script> 
    可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如: 
    test4.htm 
    =================== 
    <script> 
    var a = window.showModalDialog("test5.htm") 
    for(i=0;i<a.length;i++) alert(a
    </script> 
    test5.htm 
    =================== 
    <script> 
    function sendTo() 

    var a=new Array("a","b") 
    window.returnValue = a 
    window.close() 

    </script> 
    <body> 
    <form> 
    <input value="返回" type=button > 
    </form> 
    常见问题: 
    1,如何在模态对话框中进行提交而不新开窗口? 
    如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作:例子, 
    test6.htm 
    =================== 
    <script> 
    window.showModalDialog("test7.htm") 
    </script> 
    test7.htm 
    =================== 
    if(window.location.search) alert(window.location.search) 
    <frameset rows="0,*"> 
    <frame src="about:blank"> 
    <frame src="test8.htm"> 
    </frameset> 
    test8.htm 
    =================== 
    <form target="_self" method="get"> 
    <input name=txt value="test"> 
    <input type=submit> 
    </form> 
    <script> 
    if(window.location.search) alert(window.location.search) 
    </script> 
    2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗? 
    答案是不能。但在frame里是可以的。  
  • 相关阅读:
    HDU 2844 Coins(多重背包)
    HDU 4540 威威猫系列故事——打地鼠(DP)
    Codeforces Round #236 (Div. 2)
    FZU 2140 Forever 0.5
    HDU 1171 Big Event in HDU(DP)
    HDU 1160 FatMouse's Speed(DP)
    ZOJ 3490 String Successor
    ZOJ 3609 Modular Inverse
    ZOJ 3603 Draw Something Cheat
    ZOJ 3705 Applications
  • 原文地址:https://www.cnblogs.com/hdjjun/p/1223721.html
Copyright © 2011-2022 走看看