JS detail using modal window (the showModalDialog) of

basic introduction:
          the showModalDialog () (IEs . 4 + support)
          the showModelessDialog () (IEs . 5 + support)
          window.showModalDialog () method is used to create a modal dialog box displays HTML content.
          window.showModelessDialog () method is used to create a modeless dialog displays HTML content. 
Usage:
          vReturnValue = window.showModalDialog (sURL [, vArguments] [, sFeatures])
          vReturnValue = window.showModelessDialog (sURL [, vArguments] [, sFeatures])
Parameters:
         sURL - required parameter type: string. Dialog box to specify the URL of the document to be displayed.
         vArguments - optional parameter type: variant. Used to pass parameters to the dialog. Any type of transmission parameters, including arrays and the like.
              - through dialog
to get parameters passed in window.dialogArguments.
      sFeatures - optional parameter type: string. Is used to describe the appearance of dialog information, may be used one or several of the following, with a semicolon ";" separated.


1. dialogHeight: box height, is not smaller than 100px
2. dialogWidth: box width.
3. dialogLeft: distance from the left of the screen.
4. dialogTop: distance from the screen.
5. center: {yes | no | 1 | 0}: is centered, the default Yes, but still can specify the height and width.
6. help: {yes | no | 1 | 0}: whether to display the Help button, the default yes.
7. resizable: {yes | no | 1 | 0} [IE5 +]: whether the size may be changed. Default no.
8. status: {yes | no | 1 | 0} [IE5 +]: whether to display the status bar. The default is yes [Modeless] or no [Modal].
9. scroll: {yes | no | 1 | 0 | on | off}: whether to display a scroll bar. The default is yes.

 

The following are several attributes used in the HTA, is generally not used in a general web page.
10. dialogHide: {yes | no | 1 | 0 | on | off}: In the Print dialog box is hidden or when the print preview. The default is no.
11. edge: {sunken | raised} : border style specified in the dialog box. The default is raised.
12. unadorned: {yes | no | 1 | 0 | on | off}: Default is no.

 

Parameter passing:

1, in order to pass parameters dialog is to be passed through vArguments. Without limiting the type for string type, a maximum of 4096 characters. You can also pass an object, for example:


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. Information can be returned to the open dialog window by window.returnValue, of course, it can be an object. For example:

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>

 

General tips:

First, how we make connections do not pop up a new window in the ultra-showModalDialog and showModelessDialog?
  Plus <base target = "_ self" > being open pages in it. This sentence is in general <head> between.

Second, how refresh showModalDialog and showModelessDialog the contents?
  In showModelessDialog in showModalDialog and can not press F5 to refresh, and they can not pop-up menu. This can only rely on

javascript, the following is the relevant code:

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

  Filename.htm to replace the name of the page and then open it in your web page where you can press F5 to refresh, attention, this should be with the <base target = "_ self"> use, or you press F5 will pop up a new window.

Third, how to turn off the showModalDialog (or showModelessDialog) with javascript open window.
  

<input type="button" value="关闭" onclick="window.close()">

 

  Also with <base target = "_ self">, or it will open a new IE window, and then turned off.

Four, Math.random with showModalDialog.

   When the pop-up page you set a fixed time (such as the above "modal.htm" page) , IE is likely to temporary file area, the download page (openPage.html) last produced, without reload

   For the dynamic loading of the page, the misunderstanding so often, if not timely update the data, it is even more detrimental to developer testing. So, you can use the following ways:

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

   strPage so that each generated is not the same, the reason is not self evident.

 

Two examples

A, returns a string

The first is the parent page has a button to open the Modal page 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 is a sub page returns over the data, we add it to a form element in the parent class

Subpage

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

We handle the page where the value in here to return to the parent pages on it, and then close the page on it

Second, a data return

Parent page

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];
         
     
    }

 Subpage

 

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

Returns an array on it, if open, then open, or opened in Sogou browser is a 360 page or something blocking the

 Some time ago the use of JS winodw.showModalDialog behind the scenes to see the static page content can not be found in time to display the page after the update, open with open sometimes face this problem

Solution 
 

window.showModalDialog(getUrl+"?Rnd="+Math.random(),"","dialogWidth:600px;dialogHeight:400px;help:no;scroll:yes;center:yes;status:no;"); 

So there is not cached

Reproduced in: https: //www.cnblogs.com/Alenliu/p/3894636.html

Guess you like

Origin blog.csdn.net/weixin_33834910/article/details/93470026
Recommended