JavaScript compatible with all browsers Open dialog box solutions

Last Update:2017-01-13 Source: Internet

Author: User

Tags file upload

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

use JavaScript member access features to implement the universal version of the Compatible all browser Open dialog box features

Open web Page dialog box, there are generally three ways: window.open, window.showModalDialog, Window.showmodelessdialog, each has its advantages and disadvantages. The first method: Window.Open is a commonly used method, it is compatible with all browsers, open a new page window is very simple, but this method opens the "dialog" it by default is not support interaction (such as: Get the return value) and suspend operation (ie: after opening, if not closed, The other page windows are not operational and are in a pending state; the second and third method: window.showModalDialog, Window.showmodelessdialog Support Interactive operation and if the use of ShowModalDialog also support the modal dialog box, can implement other page window is suspended, meet the criteria of the dialog box, but because these two methods only support IE browser, so, unless the user is required to specify in IE Browse operation Web page, Otherwise, it is not recommended to use. dialog box in fact, in the actual Web site class system is essential, in order to solve the dialog box compatibility and interaction features, I for the JavaScript member access characteristics (all members are in the form of key-value pairs, You can access it through a member accessor, such as: Window.alert, or you can access it through a key, such as "alert" window[, to implement an interactive common dialog box.

First, to define the page contents of the dialog box, the code is as follows:

windialog.html

&lt;! doctype&nbsp;html&nbsp;public&nbsp; "-//w3c//dtd&nbsp;xhtml&nbsp;1.0&nbsp;transitional//en" &nbsp; "http://
Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&gt; &lt;html&nbsp;xmlns=" http://www.w3.org/1999/xhtml "&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp; &nbsp;&lt;table&nbsp;id= "optionstable" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt; &nbsp; No. &lt;/th&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt; Surname &nbsp; Name &lt;/th &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt; Sex &nbsp; &lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;th&gt;Learning &nbsp; Calendar &lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/thead&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt; Tbody&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0001&lt;/td&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; John &lt;/td &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Men &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;td&gt; Undergraduate &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsP;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0002&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Zhang Qi &lt;/td&gt; &nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Women &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Undergraduate &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0003&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Dick &lt;/td&gt; &nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; male &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&Nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Specialist &lt;/td&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0004&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Zhao Liu &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Men &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Doctor &lt;/td&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;/tbody&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/table&gt; &lt;script&nbsp;type= "Text/javascript" &gt; &nbsp; &nbsp;&nbsp;&nbsp;var&nbsp;rEquest&nbsp;=&nbsp;getrequest ();
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;cancel&nbsp;=&nbsp;true; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;window.onload&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;var&nbsp;tbody&nbsp;=&nbsp;document.getelementbyid ("Optionstable"). GetElementsByTagName ("
Tbody "). Item (0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp; (var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp; tbody.rows.length;&nbsp;i++) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var
&nbsp;row&nbsp;=&nbsp;tbody.rows[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row.onmouseover&nbsp;=&nbsp;function &nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;this.style.backgroundColor&nbsp;=&nbsp; "Red"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row.onmouseout&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.style.backgroundColor&nbsp;=&nbsp; ""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row.onclick&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (request["complete"]) &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;window.opener[request["complete"]] (getselectvalues (this)) &nbsp;//method to callback the parent window &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.cancel
&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;window.close (); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &NBSP;&NBSP;&NBSP} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;window.onunload&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (cancel&nbsp;&amp;&amp;&nbsp;request["Cancel"]) &nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.opener[request["Cancel"]] (); &nbsp;// Methods to callback the parent window &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;//Get URL Parameters &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;getrequest () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;var&nbsp;url&nbsp;=&nbsp;location.search;&nbsp;//gets the "?" in the URL.
Character string &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;therequest&nbsp;=&nbsp;new&nbsp;object (); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (Url.indexof ("?") &nbsp;!=&nbsp;-1) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;str
&NBSP;=&NBSP;URL.SUBSTR (1);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strs&nbsp;=&nbsp;str.split ("&amp;"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp; (var&nbsp;i&nbsp;=&nbsp;0; &nbsp;i&nbsp;&lt;&nbsp;strs.length;&nbsp;i++) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;therequest[strs[i].split ("=") [0]]&nbsp;=&nbsp; (strs[i].split ("=") [1]
); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;theRequest; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//gets an array of the contents of the cells of the currently selected row &nbsp;&nbsp;&nbsp;&nbsp;function &nbsp;getselectvalues (Row) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;values&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp; (var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp; row.cells.length;&nbsp;i++) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
values[i]&nbsp;=&nbsp;row.cells[i].innerhtml; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;
Values &NBSP;&NBSP;&NBSP;&NBSP} &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

The key in the preceding code is the method statement that recalls the parent window: window.opener[request["complete"]] (getselectvalues (this)); window.opener[ request["Cancel"]] (), or it can be invoked dynamically using the Eval form.

Two, and then look at how the parent window (that is, the calling window) pops up the dialog box and interacts with the code as follows:

winopner.html

&lt;! Doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; parent window &lt;/title&gt; &lt;/head &gt; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input &nbsp;id= "Text1" &nbsp;type= "text" &nbsp;/&gt;&lt;input&nbsp;id= "Button1" &nbsp;type= "button" &nbsp;value= "Open child window" &nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type= "Text/javascript" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getelementbyid ("Button1"). onclick &nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;windialog&nbsp;=&nbsp;window.open ("Windialog.html?complete=dialog_complete &amp;cancel=dialog_cancel the callback method specified in the//parameter &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "_blank", "Toolbar=no,menubar=no,scrollbars=auto, Resizable=no,location=no,status=no,depended=yes,width=600,height=500,left= "&nbsp;+&nbsp; (screen.width&nbsp;-
&nbsp;600) &nbsp;/&nbsp;2&nbsp;+&nbsp; ", top=" &nbsp;+&nbsp; (screen.height&nbsp;-&nbsp;500) &nbsp;/&nbsp;2);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Function&nbsp;dialog_complete (Result) &nbsp;{&nbsp;//callback method when completed &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;alert (result); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Function&nbsp;dialog_cancel () callback method when &nbsp;{//dialog box closes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;alert ("cancel!"); &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt; &lt;/body&gt; &lt;/html &Gt

In addition to using the Window.Open method to open a new window in the preceding code, it is particularly necessary to note that the URL contains the callback method parameters that are agreed to in the Windialog.html dialog page: Complete=dialog_complete&cancel =dialog_cancel, this will automatically callback the Dialog_complete method when the dialog box is opened and the Dialog_cancel method will be recalled if the shutdown is canceled.

Let's take a look at the effect screenshot:

To open a dialog box:

Select a row (click) data, callback the Dialog_complete method in the parent window, eject the selected data, and of course you can write the data to the text box:

If you do not choose to close directly (that is, cancel), callback the Dialog_cancel in the parent window:

See these, there is no feel good, I think still can, of course, some people may say the above URL should include callback method parameters, if the parameter name or method name is wrong, it will cause callback unsuccessful, this is a problem, There are also every call page to repeat a bunch of window.open parameters is not good, can be encapsulated into an object? Of course, I thought of all this, and I realized it, see the following package code:

Webdialog.js defined as Webdialog object:

var&nbsp;webdialog&nbsp;=&nbsp;function&nbsp; (url,&nbsp;width,&nbsp;height,&nbsp;resizeable) &nbsp;{&nbsp;
&nbsp;&nbsp;&nbsp;this.left&nbsp;=&nbsp; (screen.width&nbsp;-&nbsp;width) &nbsp;/&nbsp;2;
&nbsp;&nbsp;&nbsp;&nbsp;this.top&nbsp;=&nbsp; (screen.height&nbsp;-&nbsp;height) &nbsp;/&nbsp;2;
&nbsp;&nbsp;&nbsp;&nbsp;this.complete&nbsp;=&nbsp;function&nbsp; (Result) &nbsp;{&nbsp;};
&nbsp;&nbsp;&nbsp;&nbsp;this.cancel&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;};
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;_self&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;this.show&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;var&nbsp;_features&nbsp;=&nbsp; "toolbar=no,menubar=no,scrollbars=auto,resizable=" &nbsp;+&nbsp; resizeable&nbsp;+&nbsp; ", location=no,status=no,depended=yes,width=" &nbsp;+&nbsp;width&nbsp;+&nbsp; ", height="
&nbsp;+&nbsp;height&nbsp;+&nbsp; ", left=" &nbsp;+&nbsp;_self.left&nbsp;+&nbsp; ", top=" &nbsp;+&nbsp;_self.top; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;wiNdialog&nbsp;=&nbsp;window.open (url,&nbsp; "Webdialogwindow", &nbsp;_features);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winDialog.dialog_complete&nbsp;=&nbsp;_self.complete;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winDialog.dialog_cancel&nbsp;=&nbsp;_self.cancel; &NBSP;&NBSP;&NBSP;&NBSP}}

Assigns the Window object returned by window.open to the Windialog variable in the preceding code, and then assigns the Dialog_complete and Dialog_cancel methods

Windialog2.html Define what the dialog box displays:

&lt;! doctype&nbsp;html&nbsp;public&nbsp; "-//w3c//dtd&nbsp;xhtml&nbsp;1.0&nbsp;transitional//en" &nbsp; "http://
Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&gt; &lt;html&nbsp;xmlns=" http://www.w3.org/1999/xhtml "&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp; &nbsp;&lt;table&nbsp;id= "optionstable" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt; &nbsp; No. &lt;/th&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt; Surname &nbsp; Name &lt;/th &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt; Sex &nbsp; &lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;th&gt;Learning &nbsp; Calendar &lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/thead&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt; Tbody&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0001&lt;/td&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; John &lt;/td &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Men &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;td&gt; Undergraduate &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsP;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0002&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Zhang Qi &lt;/td&gt; &nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Women &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Undergraduate &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0003&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Dick &lt;/td&gt; &nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; male &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&Nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Specialist &lt;/td&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;0004&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Zhao Liu &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Men &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; Doctor &lt;/td&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;/tbody&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/table&gt; &lt;script&nbsp;type= "Text/javascript" &gt; &nbsp; &nbsp;&nbsp;&nbsp;var&nbsp;cancel&nbsp;=&nbsp;true; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;window.onload&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;var&nbsp;tbody&nbsp;=&nbsp;document.getelementbyid ("Optionstable"). GetElementsByTagName ("
Tbody "). Item (0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp; (var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp; tbody.rows.length;&nbsp;i++) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var
&nbsp;row&nbsp;=&nbsp;tbody.rows[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row.onmouseover&nbsp;=&nbsp;function &nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;this.style.backgroundColor&nbsp;=&nbsp; "Red"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row.onmouseout&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.style.backgroundcolor&nbsp;=
&nbsp; ""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row.onclick&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dialog_complete&nbsp;=&nbsp; window["Dialog_complete"];//Get callback method &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (dialog_complete&nbsp;&amp;&amp;&nbsp;typeof&nbsp;dialog_complete&nbsp;!= &nbsp; "undefined") &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dialog_complete (Getselectvalues (this)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;window.cancel&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;window.close (); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&NBSP;&NBSP;&NBSP;&NBSP} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;window.onunload&nbsp;=&nbsp;function&nbsp; () &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dialog_cancel&nbsp;=&nbsp;window["Dialog_cancel"]; &nbsp;//Get callback method &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (Cancel&nbsp;&amp;&amp;&nbsp;dialog_ cancel&nbsp;&amp;&amp;&nbsp;typeof&nbsp;dialog_cancel&nbsp;!=&nbsp; "undefined") &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dialog_cancel (); &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;// Gets an array of contents for the currently selected row of cells &nbsp;&nbsp;&nbsp;&nbsp;Function&nbsp;getselectvalues (Row) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;values&nbsp;
=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp; (var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp; row.cells.length;&nbsp;i++) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
values[i]&nbsp;=&nbsp;row.cells[i].innerhtml; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;
Values &NBSP;&NBSP;&NBSP;&NBSP} &nbsp; &nbsp; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

In the preceding code, get the callback method by window["Dialog_complete"], window["Dialog_cancel", and then by judging whether there is a success, call it directly if it succeeds. The method called must be consistent with the signature of the specified callback method that was previously encapsulated. The

finally looks at how the same interaction can be done through the Webdialog object invocation, as follows:

winopner2.html

&lt;! Doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; parent window &lt;/title&gt; &nbsp; &nbsp;&nbsp;&nbsp;&lt;script&nbsp;type= "Text/javascript" &nbsp;src= "Webdialog.js?v1" &gt;&lt;/script&gt; &lt;/ head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input &nbsp;id= "Text1" &nbsp;type= "text" &nbsp;/&gt;&lt;input&nbsp;id= "Button1" &nbsp;type= "button" &nbsp;value= "Open child window" &nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type= "Text/javascript"
&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getelementbyid ("Button1"). Onclick=function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dlg&nbsp;=&nbsp;new&nbsp;
Webdialog ("windialog2.html",&nbsp;600,&nbsp;500,&nbsp; "yes"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlg.complete=function (Result) {// callback method when completed &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert (result);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlg.cancel=function () callback method when &nbsp;{//cancel
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert ("cancel!");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlg.show ();
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

The end result is the same as the method before the encapsulation, and no screenshots are repeated here.

If the callback method is too cumbersome to write a callback method in every parent window, simply open the dialog box and assign the selected value to the specified text box, OK? Of course, add a Refillinputid property for Webdialog to the ID of the backfill text box, as follows:

Partial code: &nbsp;&nbsp;&nbsp;&nbsp;this.refillinputid&nbsp;=&nbsp;null;//Backfill Frame ID &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;_
self&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;this.show&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;var&nbsp;_features&nbsp;=&nbsp; "toolbar=no,menubar=no,scrollbars=auto,resizable=" &nbsp;+&nbsp; resizeable&nbsp;+&nbsp; ", location=no,status=no,depended=yes,width=" &nbsp;+&nbsp;width&nbsp;+&nbsp; ", height="
&nbsp;+&nbsp;height&nbsp;+&nbsp; ", left=" &nbsp;+&nbsp;_self.left&nbsp;+&nbsp; ", top=" &nbsp;+&nbsp;_self.top; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;windialog&nbsp;=&nbsp;window.open (url,&nbsp; "
Webdialogwindow ", &nbsp;_features);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winDialog.dialog_complete&nbsp;=&nbsp;_self.complete;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winDialog.dialog_cancel&nbsp;=&nbsp;_self.cancel; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;windialog.refillinputid&nbsp;=&nbsp;_self.refillinputiD &nbsp;&nbsp;&nbsp;&nbsp;}

Then in the dialog content page, add the selection backfill value, as follows:

Row.onclick = function () {
var dialog_complete = window["Dialog_complete"];//Get callback method
if (dialog_complete    && typeof dialog_complete!= "undefined") {
dialog_complete (this));
var refillinputid = window["Refillinputid"]//Backfill text box
if (typeof Refillinputid = "string") {
Window.opener.document.getElementById (refillinputid). Value = Getselectvalues (this) [0];
}
Window.cancel = false;
Window.close ();

When this is invoked in the parent window, you can specify the callback method if you want to handle the result of the selection yourself, otherwise omit it and specify the backfill text box directly, as follows:

document.getElementById ("Button1") .onclick&nbsp;=&nbsp;function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;var
&nbsp;dlg&nbsp;=&nbsp;new&nbsp;webdialog ("windialog2.html",&nbsp;600,&nbsp;500,&nbsp; "yes"); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlg.complete =function (Result) {//Completion callback method &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert (result);
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlg.cancel= function () &nbsp;{//callback method when canceled &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert ("cancel!");
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;dlg.refillinputid&nbsp;=&nbsp; "TEXT1";
&nbsp;&nbsp;&nbsp;&nbsp;dlg.show (); }

The final effect is as follows:

Well, the dialog box is pretty much the same. I said that the method is not necessarily the best, but must be able to meet the basic requirements of the text in addition to the beginning of the interaction, there is a hang, this is not yet thought of methods, should be browser constraints, because if someone maliciously produced countless hanging windows, The computer will crash, of course, if there is a better way, welcome to exchange, thank you!

Compatible with all browser JavaScript Click Open Select File window

The File Upload button for chrome and IE is simple and difficult to read. I thought of a way to do it. <input type= "file" id= "file" style= "Display:none", and then use another <input type= "button" onclick= "File.Click ()"/>, this method seems to be nothing wonderful, the problem is under IE, FF can be very good operation, You just need to make the button look good on the display. Chrome does not have to eat this set, and finally have to let this input box display. Then rotate between the display and the hide. I seem to find that chrome is not so sensitive to my changes, I'm surprised to think that Chrome has cached , the thief is not likely.

I do not know why speculation is display:none reason, maybe Chrome think I do this, in deceiving the user, I had to surrender, changed to set style= "HEIGHT:0;WIDTH:0;DISPLAY:NONE9;", do not know why, It was a success, and then I tested it over and over in the developer tool, and as long as I checked "display:none", I couldn't get the file dialog to pop up. In IE and FF there is no need for such trouble.

&lt;! doctype&nbsp;html&nbsp;public&nbsp; "-//w3c//dtd&nbsp;xhtml&nbsp;1.0&nbsp;transitional//en" "http://www.w3.org/ Tr/xhtml1/dtd/xhtml1-transitional.dtd "&gt; &lt;html&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&lt;title&gt; Compatible with all browser JavaScript click on open Select File window &lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src= "http:// Ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input &nbsp;type= "File" &nbsp;id= "file" &nbsp;style= "height:0px;width:0px;" &gt; &lt;input&nbsp;type= "button" &nbsp;value= "click" &nbsp;id= "Brow" &gt; &lt;/body&gt; &lt;script&nbsp;language= " JavaScript "&gt; &lt;!--&nbsp;&nbsp;&nbsp;&nbsp;//input&nbsp;file&nbsp; style properties with a width high of zero are compatible with the Chrome browser, using display: None non-all browsers support &nbsp;&nbsp;&nbsp;&nbsp;$ (function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ ("#brow"). Click (function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;$ ("#file"). Click ();&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; ($.browser.msie) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showimg ();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ ("#file"). Change (function&nbsp; () &nbsp;{&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showimg ();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;showimg () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;alert ($ ("#file"). Val ()); &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp})//--&gt; &lt;/script&gt; &lt;/html &gt;

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More