1. Three most common dialog boxes in JS
//=================================================================/The dialog box pops up and outputs a prompt message function ale() { //A dialog box alert("Prompt message!"); } //A query box pops up, with confirm and cancel buttons function firm() { //Use the value returned by the dialog box (true or false) if (confirm("Are you sure to submit?")) { alert("Clicked to confirm"); } else { alert("Clicked to cancel"); } } //A input box pops up, enters a paragraph of text, and you can submit function prom() { var name = prompt("Please enter your name", ""); // Assign the input content to the variable name, //It should be noted here that propt has two parameters. If the prompt is the prompt, and then the default value in the dialog box after the dialog box comes out.//If the returned content is { alert("Welcome:" + name) } }2. The 6 prompt boxes and operations commonly used when clicking buttons
<!-------------------------> <input type="button" name="btn2" id="btn2" value="delete" onclick="return confirm('Yes/No');); <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- onclick="javaScript:window.location.href='http://www.baidu.com';"/> <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- javaScript:window.location.reload();//Return to the current page and refresh <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------3. Pop up independent window
//Close, the dialog box pops up in the parent window, and the child window directly closes this.Response.Write("<script language=javascript>window.close();</script>"); //Close, neither the parent window nor the child window pops up in the parent window, directly closes this.Response.Write("<script>"); this.Response.Write("{top.opener =null;top.close();}"); this.Response.Write("</script>"); //Popular window refreshes the current page width=200 height=200 menu. The menu bar, toolbar, address bar, status bar does not have this.Response.Write("<script language=javascript>window.open('rows.aspx','newwindow','width=200,height=200')</script>"); //The 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>"); //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.location.href='WebForm2.aspx';</script> "); //Close the current child window and refresh 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>"); //The child window refreshes the parent window this.Response.Write("<script>window.opener.location.href=window.opener.location.href='WebForm1.aspx';</script>"); //The child window refreshes the parent window this.Response.Write("<script>window.opener.location.href='WebForm1.aspx';</script>"); //The child window pops up. After confirmation, the child window pops up (WebForm2.aspx) this.Response.Write("<script language='javascript'>alert('posted successfully!');window.open('WebForm2.aspx')</script>"); //The prompt window pops up, and after confirmation, refresh the parent window this.Response.Write("<script>alert('posted successfully!');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)"> // 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=no, status=no') //This sentence should be written as one line-->Parameter explanation:
window.open command to pop up a new window;
'page.html' file name of the pop-up window;
'newwindow' The name of the pop-up window (not the file name), if not required, it can be replaced by empty '';
height=100 window height;
width=400 window width;
top=0 The pixel value of the window from the top of the screen;
left=0 The pixel value of the window to the left of the screen;
toolbar=no Whether to display the toolbar, yes is the display;
menubar, scrollbars means menu bar and scrollbar.
resizable=no Whether to allow changing the window size, yes is allowed;
location=no Whether to display the address bar, yes is allowed;
status=no Whether to display information in the status bar (usually the file is already open), yes is allowed;
'newwin':Hide menu bar address bar toolbar
4. Pop-up window example demonstration
//1. The most basic pop-up window code window.open ('page.html') //2. The pop-up window after setting window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no') // This sentence should be written in one line// Parameter explanation: // window.open The command to pop up a new window; //'page.html' The file name of the pop-up window; //'newwindow' The name of the pop-up window (not the file name), if not required, you can use empty '' instead; //height=100 Window height; //width=400 window width; //top=0 pixel value of the window from the top of the screen; //left=0 pixel value of the window from the left side of the screen; //toolbar=no Whether to display the toolbar, yes is the display; //menubar, scrollbars represents the menu bar and scrollbar. //resizable=no Whether to allow changing the window size, yes is allowed; //location=no Whether to display the address bar, yes is allowed; //status=no Whether to display the information in the status bar (usually the file has been opened), yes is allowed; //3. Use function to control the pop-up window function openwin() { window.open("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //Write it as a line} $(document).ready(fucntion(){ openwin(); }); //A function openwin() is defined here, and the function content is to open a window. There is no use until it is called. How to call it? //Method 1: <body onload="openwin()"> A pop-up window is when the browser reads the page; //Method 2: <body onunload="openwin()"> A pop-up window is when the browser leaves the page; //Method 3: Call with a connection: //<a href="#" onclick="openwin()">Open a window</a> //Note: The "#" used is a virtual connection. //Method 4: Call with one button: //<input type="button" onclick="openwin()" value="openwin()"> //4, 2 windows pop up 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=no, status=no")//Write it into a line window.open("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//Write it as a line} //To avoid covering the two windows that pop up, use top and left to control the popup position and do not overwrite each other. Finally, use the four methods mentioned above to call it. //Note: The names (newwindows and newwindow2) of the two windows should not be the same, or they are simply empty. //5. Open the file 1.htm in the main window, and a small window pops up page.html function openwin() { window.open("page.html", "", "width=200,height=200") } //Call: <a href="1.htm" onclick="openwin()">open</a> //6. The timed closing control of the pop-up window//Low 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 (note that it is added to the HTML of page.html, not the main page), wouldn't it be cooler to let it close automatically after 10 seconds? //First, add the following code to the <head> area of the page.html file: function closeit() { setTimeout("self.close()", 10000) //ms} //Page loading is completed and calls the close event $(document).ready(fucntion(){ closeit(); }); //7. Add a close button to the pop-up window//<INPUT TYPE='BUTTON' VALUE='Close' onClick='window.close()'> //8. Pop-up window included - one page and two windows //The above examples contain two windows, one is the main window and the other is the pop-up window. With the following example, you can complete the above effect in a page. function openwin() { OpenWindow = window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars=" + scroll + ",menubar=no"); //Write it as a line OpenWindow.document.write("<TITLE>Example</TITLE>") OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") OpenWindow.document.write("<h1>Hello!</h1>") OpenWindow.document.write("New window opened!") OpenWindow.document.write("</BODY>") OpenWindow.document.write("</HTML>") OpenWindow.document.close() } //<a href="#" onclick="openwin()">Open a window</a> //<input type="button" onclick="openwin()" value="openwin()"> //9. Ultimate application-Popular window's cookie control//Recall that although the pop-up window above is cool, there is a little problem. For example, if you place the script above in a page that needs to pass frequently (such as the home page), then every time you refresh this page, the window will pop up once, and we just use cookies to control it. //First, add the following code to the <HEAD> area of the main page HTML: function openwin() { window.open("page.html", "", "width=200,height=200") } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue = unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function loadpopup() { if (get_cookie('popped') == '') { openwin() document.cookie = "popped=yes" } } //Then, replace the original <BODY> sentence in the main page with <body onload="loadpopup()"> (note that it is not openwin but loadpop!) You can try refreshing this page or re-entering it, and the window will never pop up again. The real Pop-Only-Once!The above summary of the implementation methods of js pop-up boxes, dialog boxes, prompt boxes, and pop-up windows (recommended) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.