The js pop-up dialog box includes the confirm, alert, prompt, window. open and so on. I will organize some application instances of these pop-up dialog boxes for you and hope you will have a great deal of experience.
Warning (alert)
When visiting the website, have you ever encountered such a situation? A small window appears in front of you with a warning text or other prompts. If you do not click OK, you cannot perform any operations on the webpage. That's right. alert is responsible for the small window of Doon.
The following code is an instance using alert.
| The Code is as follows: | Copy code |
| <Script type = "text/JavaScript"> Alert ("I Am a cainiao, who are I afraid "); </Script> |
|
My personal opinion is to use alert as few as possible, which is unfriendly. It may even make some people think your website is dangerous.
View an instance using alert
Confirm)
The confirmation box allows you to select whether a problem meets the actual conditions.
"Say! Yes or no? Quick answer !"
If you want to express this, confirm is no longer appropriate. Let's look at the following code: We use confirm ("Are you a cainiao? ") Ask a visitor. The variable r stores the visitor's response. There are only two possible values: true or false. Yes, it is a Boolean value. The statement after confirm is a different response to the visitor's answer.
| The Code is as follows: | Copy code |
| <Script type = "text/JavaScript"> Var r = confirm ("Are you a cainiao "); If (r = true) { Document. write ("mutual "); } Else { Document. write ("Admire "); } </Script> |
|
View a confirm instance
Question (prompt)
Prompt is similar to confirm, but it allows the visitor to enter the answer at will. Let's modify the previous switch example. We made different comments based on the score, but the program is not complete, and it didn't ask us the score at all, but suppose I got 65 points. This is unfair. Now I can use prompt to ask a visitor, and use score to store user input answers. The rest of the tasks are completed by the switch.
| The Code is as follows: | Copy code |
<Script type = "text/JavaScript"> |
|
View a completed instance
| The Code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <Title> usage example of the three pop-up dialog boxes </title> <Script language = "javascript"> Function ale () { // There is nothing to say, that is, a prompt dialog box is displayed. Alert ("I am sure you are using demo 1 "); } Function firm () { // Use the value returned by the dialog box (true or false) If (confirm ("are you sure you want to transfer to another blog? ")) { // If it is true, switch the page to thcjp.cnblogs.com Location. href = "http://blog.csdn.net/fengyifei11228 "; } Else { // Otherwise, it will be explained, hehe Alert ("if you click Cancel, false is returned "); } } 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 in the dialog box is displayed later. If (name) // if the returned content has { Alert ("Welcome:" + name) } } </Script> </Head>
<Body> <P> there are three types of dialog boxes </p> <P> 1: only a reminder. No changes can be made to the script. </p> <P> 2: generally used for confirmation. true or false is returned, so it can be easily used for ifelse judgment. </p> <P> 3: a dialog box with input. You can return the string you entered, which is commonly used to insert UBB format images in some message books or forum input content. </p> <P> The following is an example: </p> <P> demo 1: reminder dialog box </p> <P> <Input type = "submit" name = "Submit" value = "submit" onclick = "ale ()"/> </P> <P> DEMO 2: confirmation dialog box </p> <P> <Input type = "submit" name = "Submit2" value = "submit" onclick = "firm ()"/> </P> <P> demo 3: Ask the user to input and then give a result </p> <P> <Input type = "submit" name = "Submit3" value = "submit" onclick = "prom ()"/> </P> </Body> </Html> |
|
The window. open () dialog box is displayed.
1. The most basic js pop-up dialog box code]
This is the most basic js pop-up dialog box. In fact, the code is very simple:
| The Code is as follows: | Copy code |
<Script LANGUAGE = "javascript"> |
|
Because this is a piece of javascripts code, they should be placed between the <script LANGUAGE = "javascript"> label and </script>. <! -- And --> are used for some earlier browsers, and the code in the labels is not displayed as text in these old browsers. This is a good habit.
Window. open ("page.html") is used to control the pop-up window page.html. If page.html is not in the same path as the main window, the path, absolute path (http: //), and relative path (../) should be specified before. You can use single quotes and double quotes, but do not mix them.
This piece of code can be added to any location of HTML, either between
[2. Code of the js pop-up dialog box for adding property settings]
Next we will talk about setting properties in the js pop-up dialog box. You just need to add something to the code above.
Let's customize the appearance, size, and position of the window displayed in the js pop-up dialog box to adapt to the specific situation of the page.
| The Code is as follows: | Copy code |
| <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 ") // Write a row --> </Script> |
|
Parameter description:
<Script LANGUAGE = "javascript"> the js script starts;
Window. open command to pop up a new window;
The file name in the "page.html" pop-up window;
"Newwindow" Name of the pop-up window (not a file name), not required, can be blank;
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;
</Script> end of js script
[3. Use Function Control js to bring up the dialog box]
The following is the code of a complete js pop-up dialog box.
| The Code is as follows: | Copy code |
<Html> |
|
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: A window pops up when the browser reads the page;
| The Code is as follows: | Copy code |
<Body onload = "openwin ()"> |
|
Method 2: A window pops up when the browser leaves the page;
| The Code is as follows: | Copy code |
<Body onunload = "openwin ()"> |
|
Method 3: call with a connection:
| The Code is as follows: | Copy code |
<A href = "#" onclick = "openwin ()"> open a window. </a> |
|
Note: "#" is a virtual connection.
Method 4: call with a button:
| The Code is as follows: | Copy code |
<Input type = "button" onclick = "openwin ()" value = "open window"> |
|
[4. A js pop-up dialog box is displayed for two windows at the same time]
Slightly modify the source code:
| The Code is as follows: | Copy code |
<Script LANGUAGE = "javascript"> |
|
To avoid overwriting the two pop-up windows, use top and left to control the position of the pop-up window. Finally, use the four methods mentioned above to call.
Note: The names (newwindows and newwindow2) of the two js pop-up dialog boxes should not be the same, or they are all empty.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
