JS pop-up box, dialog box, prompt box, pop-up window Summary

I. three most common dialog boxes in JS

// ==================================== Three most common pop-up dialog boxes in JS ============== ==================/// a dialog box is displayed and a prompt message is displayed. Function ale () {// a dialog box is displayed, alert ("prompt message! ");} // A dialog box is displayed, with the OK or cancel button function firm () {// use the value returned by the dialog box (true or false) if (confirm ("are you sure you want to submit? ") {Alert (" Click OK ");} else {alert (" click Cancel ") ;}// enter a text box, you can submit function prom () {var name = prompt ("enter your name", ""); // assign the input content to the variable name, // note that the prompt has two parameters. The prompt is displayed first, and the default value if (name) in the dialog box is displayed later) // If the returned content is {alert ("Welcome:" + name )}}

2. The "6" prompt box and operations are often used when you click the button.

<! ----------- Button prompt box ----------> <input type = "button" name = "btn2" id = "btn2" value = "delete" onclick = "Return confirm ('yes/No '); ); <! ----------- Button prompt box ----------> <input type = "button" name = "btn2" id = "btn2" value = "prompt" onclick = "javascript: alert ('Are you sure you want to delete it? '); <! ----------- Submit button ----------> <input type = "button" value = "Submit" onclick = "javascript: window. location. href = 'HTTP: // www.baidu.com '; "/> <! ----------- Close button ----------> <input type = "button" value = "close" onclick = "javascript: window. Close ();"> <! ----------- Return and close the connection ----------> <a href = "#" onclick = "javascript:; window. opener. location. reload (); window. close () "> return </a> javascript: window. location. reload (); // return to the current page and refresh <! ----------- Return to the upper-level page ----------> <input type = "button" name = "button" value = "<return" onclick = "javascript: history. Go (-1)"/>

3. An independent window is displayed.

// Close. The parent window dialog box is displayed, and the Child window is closed directly. response. write ("<script language = JavaScript> window. close (); </SCRIPT> "); // close. The dialog box is not displayed for both the parent and child windows. Close this directly. response. write ("<SCRIPT>"); this. response. write ("{top. opener = NULL; top. close ();} "); this. response. write ("</SCRIPT>"); // refresh the current page width = 200 Height = 200 menu in the pop-up window. Menu Bar, toolbar, address bar, and status bar do not have this. response. write ("<script language = JavaScript> window. open ('rows. aspx ', 'newwindow', 'width = 200, Height = 100') </SCRIPT> "); // refresh the current page in the displayed window. response. write ("<script language = JavaScript> window. open ('rows. aspx ') </SCRIPT> "); this. response. write ("<SCRIPT> window. open ('webform2. aspx ',' _ blank '); </SCRIPT> "); // the pop-up Prompt window jumps to the webform2.aspx page (in an IE window) This. response. write ("<script language = JavaScript> Alert ('registered successfully'); window. window. location. href = 'webform2. aspx '; </SCRIPT> "); // close the current subwindow and refresh the parent window. response. write ("<SCRIPT> window. opener. location. href = Window. opener. location. href; window. close (); </SCRIPT> "); this. response. write ("<SCRIPT> using your opener.location.replace(using your opener.doc ument. referrer); window. close (); </SCRIPT> "); // refresh the parent window in the subwindow. This. response. write ("<SCRIPT> window. opener. location. href = Window. opener. Location. href; </SCRIPT> "); this. response. write ("<SCRIPT> window. opener. location. href = 'webform1. aspx '; </SCRIPT> "); // a prompt window is displayed. after confirmation, A subwindow (webform2.aspx) is displayed. This. response. write ("<script language = 'javascript '> alert (' published successfully! '); Window. open ('webform2. aspx ') </SCRIPT> "); // a prompt window is displayed. Refresh the parent window. response. write ("<SCRIPT> alert ('published successfully! '); Window. opener. location. href = Window. opener. location. href; </SCRIPT> "); // the same page <input type =" button "value =" button "onclick =" javascript: window. open (window. location. href) "> // response. write ("parent. mainframebottom. location. href = 'yourwebform. aspx? Temp = "+ STR +" '; "); <script language =" JavaScript "> <! -- Window. open ('page.html ', 'newwindow', 'height = 100, width = 400, Top = 0, Left = 0, toolbar = No, menubar = No, scrollbars = No, resizable = No, location = n o, status = no') // write a line -->

Parameter description:

Window. Open command to pop up a new window;
'Page.html 'name of the pop-up window;
'Newwindow' indicates the name of the pop-up window (not the file name). It is optional and can be replaced by null;
Height = 100 window height;
Width = 400 window width;
Top = the pixel value between the 0 window and the top of the screen;
Left = 0 the pixel value between the window and the left of the screen;
Toolbar = No indicates whether to display the toolbar. Yes indicates display;
Menubar and scrollbars indicate the menu bar and scroll bar.
Resizable = No: whether to change the window size. Yes: Yes;
Location = No indicates whether the address bar is displayed. Yes indicates yes;
Status = No whether to display the information in the status bar (usually the file has been opened), yes is allowed;

'Newwin': hides the toolbar in the menu bar's address bar.

4. demo of an instance in the pop-up window

// 1. The most basic pop-up window code window. open ('page.html ') // 2. After setting, the pop-up window named 'page.html', 'newwindow', 'height = 100, width = 400, Top = 0, Left = 0, toolbar = No, menubar = No, scrollbars = No, resizable = No, location = n o, status = no') // write a line. // The parameter explanation is as follows: // window. open the command to pop up a new window; // 'page.html 'the file name of the pop-up window; // The Name Of The 'newwindow' pop-up window (not the file name), not required, can be replaced by null; // Height = 100 window height; // width = 400 window width; // Top = 0 pixels between the window and the top of the screen; // left = 0 the pixel value between the window and the left of the screen; // Toolbar = No indicates whether to display the toolbar. Yes indicates display. // menubar. scrollbars indicates the menu bar and scroll bar. // Resizable = No: whether to change the window size; yes: Yes; // location = No: whether to display the address bar; yes: Yes; // status = No whether to display the information in the status bar (usually the file has been opened), yes is allowed; // 3. Use Function Control to display the function openwin () {window. open ("page.html", "newwindow", "Height = 100, width = 400, toolbar = No, menubar = No, scrollbars = No, resizable = No, location = No, status = No ") // write a row} $ (document ). ready (fucntion () {openwin () ;}); // a function openwin () is defined here, and the function content is to open a window. There is no purpose before calling it. How to call it? // Method 1: <body onload = "openwin ()"> A window pops up when the browser reads the page. // Method 2: <body onUnload = "openwin () "> A window pops up when the browser leaves the page. // method 3: Call the page with a connection: // <a href =" # "onclick =" openwin () "> open a window </a> // note:" # "is a virtual connection. // Method 4: call with a button: // <input type = "button" onclick = "openwin () "value =" open window "> // 4. Two windows are displayed at the same time: function openwin () {window. open ("page.html", "newwindow", "Height = 100, width = 100, Top = 0, Left = 0, toolbar = No, menubar = No, scrollbars = No, resizable = No, location = n o, status = No ") // write a row of window. open ("page2.html", "newwindow2", "Height = 100, width = 100, Top = 1 00, Left = 100, toolbar = No, menubar = No, scrollbars = No, resizable = N O, loca tion = No, status = No ") // write a row} // to avoid overwriting the two pop-up windows, use top and left to control the pop-up position and do not overwrite each other. Finally, use the four methods mentioned above to call. // Note: the names of the two windows (newwindows and newwindow2) must not be the same, or they are all empty. // Open the file 1.htmin the 5th window, and pop up the window page.html function openwin () {window. open ("page.html", "", "width = 200, Height = 200")} // call: <a href = "1.htm" onclick =" openwin () "> open </a> // 6. Regularly close the control in the pop-up window. // Below we will perform some control on the pop-up window, and the effect will be better. If we add a small piece of code to the pop-up page (HTML is added to page.html, not the homepage), will it be cool to enable the code to be automatically disabled 10 seconds later? // Add the code below to the 
Reference: http://blog.csdn.net/xiaotaoqibao/article/details/6797089