JS pop-up box, dialog box, cue box, pop-up window implementation method Summary (recommended) _javascript skills

Source: Internet
Author: User

One, JS three of the most common dialog box

====================== JS most commonly used three kinds of pop-up dialog box ======================== 
 
  //Pop-up dialog box and output a message 
  function ale () { 
    // Pop up a dialog box 
    alert ("Message!"). "); 
 
  } 
 
  Pop up an inquiry box with the OK and Cancel button 
  function firm () { 
    ///using the dialog box to return the value (TRUE or False) 
    if (confirm) ("Are you sure to submit?"). ")" { 
      alert ("clicked OK"); 
    } 
    else { 
      alert ("clicked Cancel"); 
    } 
 
  Pop up an input box and enter a text that can be submitted to the 
  function Prom () { 
    var name = prompt ("Please enter your name", ""); Assign the input to the variable name, 
 
    //Here you should note that the prompt has two parameters, preceded by a hint, followed by the default value if (name) in the dialog box when the dialog box comes out, 
    if the contents are returned 
    { 
      alert ("Welcome:" + name) 
    } 
 
  } 

Second, click the button when the commonly used in the 6 prompt box and operation

<!-----------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=" hint "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=" Turns off "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 previous page---------->  
<input type= "button" name= "button" value= "< return" onclick= "Javascript:history.go ( -1)"/> 

Third, pop-up independent window

Close, the parent window pops up the dialog box, and the child window closes this directly. 
 
Response.Write ("<script language=javascript>window.close ();</script>"); Close, the parent window and child windows do not eject the dialog box to close this directly.  
Response.Write ("<script>"); This.  
Response.Write ("{Top.opener =null;top.close ();}"); This. 
 
Response.Write ("</script>"); Pop-up window refreshes the current page width=200 height=200 menu. menu bar, toolbar, address bar, status bar all without this. Response.Write ("<script language=javascript>window.open" (' rows.aspx ', ' newwindow ', ' width=200,height=200 ') 
 
</script> "); Pop-up window refreshes the current page this. 
Response.Write ("<script language=javascript>window.open (' rows.aspx ') </script>"); This. 
 
Response.Write ("<script>window.open" (' webform2.aspx ', ' _blank ');</script> "); Pop-up prompt window jumps to webform2.aspx page (in an IE window) this. Response.Write ("<script Language=javascript>alert (' registered success '); window.window.location.href= ' WebForm2.aspx '; 
 
</script> "); Closes the current child window and refreshes the parent window this. Response.Write ("<script>window.opener.location.href=window.opener.location.href;window.close (); </ Script>"); This. Response.Write ("<script>window.opener.location.replace" (Window.opener.document.referrer); Window.close (); 
 
</script> "); child window refreshes the parent window this. 
Response.Write ("<script>window.opener.location.href=window.opener.location.href;</script>"); This. 
 
Response.Write ("<script>window.opener.location.href= ' WebForm1.aspx ';</script>"); Pop-up prompt window. OK popup child window (webform2.aspx) this. Response.Write (' <script language= ' JavaScript ' >alert (' published success! 
 
'); window.open (' webform2.aspx ') </script> "); Pop-up Prompt window, OK, refresh the parent window this. Response.Write (' <script>alert success! 
 
');window.opener.location.href=window.opener.location.href;</script> "); The same page pops up <input type= "button" value= "button" onclick= "Javascript:window.open (window.location.href)" >//RESP Onse. 
 
 
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 ')//This sentence is to be written in one line-->   

Parameter explanation:

window.open the command to eject a new window;

The filename of the ' page.html ' pop-up window;

' NewWindow ' pop-up window name (not filename), not required, available null ' instead;

height=100 window height;

width=400 window width;

The pixel value of the Top=0 window from the top of the screen;

The pixel value of the left=0 window from the left side of the screen;

Toolbar=no whether the toolbar is displayed, yes for display;

Menubar,scrollbars represents the menu bar and scroll bar.

Resizable=no whether to allow changes to the window size, yes to allow;

Location=no whether the address bar is displayed, yes is allowed;

Status=no whether the information in the status bar is displayed (usually the file is open), yes to allow;

' Newwin ': Hide menu bar Address bar toolbar

Four, pop-up window instance demo

 1, the most basic pop-up window code window.open (' page.html ')//2, after setting up the pop-up window 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 ')//The sentence to be written in one line//   
Parameter explanation://window.open pop-up New Window command;////' page.html ' pop-up window filename;//' NewWindow ' pop-up window name (not filename), not required, available empty ' instead;//height=100 window height; width=400 window width;//top=0 window The pixel value at the top of the screen;//left=0 window is the pixel value to the left of the screen;//toolbar=no whether the toolbar is displayed or not, yes is displayed;//menubar,scrollbar  
s represents the menu bar and scroll bar. Resizable=no whether to allow changes to the window size, yes to allow;//location=no whether the address bar is displayed, yes to allow;//status=no whether to display information in the status bar (usually the file is open), yes to allow;//3, with  Functions control Pop-up function Openwin () {window.open ("page.html", "NewWindow", "height=100, width=400, toolbar =no, Menubar=no, 
 Scrollbars=no, Resizable=no, Location=no, Status=no ")//written in one line} $ (document). Ready (Fucntion () {Openwin (); 
 
}); A function Openwin () is defined here, and the function content is to open a window. There is no use before calling it. 
 
How to call it? Method One: <body onload= "Openwin ()" > Browser pop-up window when reading page;//Method two: <body OnunloAd= "Openwin ()" > pop-up window when the browser leaves the page;//Method Three: Call with a connection://<a href= "#" onclick= "Openwin ()" > Open a Window </a>//Note: Use of "#"  
is a virtual connection. Method Four: Call with a button://<input type= "button" onclick= "Openwin ()" value= "open Window" >//4, Pop-up 2 window 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 line window.open (" page2.html "," NewWindow2 "," height=100, width=100, top=1 Left=100,toolbar=no, Menubar=no, Scrollbars=no, Resizable=no, Loca Tion=no, Status=no ")//write one line}//To avoid pop-up 2 windows overlay , use top and left to control the pop-up position not to cover each other.  
The last four methods mentioned above can be invoked. 
 
 Note: The name of the 2 windows (NewWindows and NewWindow2) is not the same, or simply all empty.   
 
5, the main window opens the file 1.htm, simultaneously pop-up small window page.html function Openwin () {window.open ("page.html", "", "width=200,height=200")} Call: <a href= "1.htm" onclick= "Openwin ()" >open</a>//6, pop-up window of timed shutdown control//below we have some control of the pop-up window, the effect is better. If we add a small piece of code to the pop-up page (note that the page.html is added to theHTML, not in the main page), let it automatically shut down in 10 seconds is it cooler? First, add the following code to the  

Above this JS pop-up box, dialog box, hint box, pop-up window to achieve the summary (recommended) is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud habitat community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.