Three popup dialog boxes in JavaScript

Source: Internet
Author: User

the small partners who have studied JS will find that we have used the alert () method, the prompt () method, the prompt () method in some instances, they all pop up a dialog box on the screen, and display the contents of the parentheses above, using this method to make the page interactivity more exciting, In fact, we often use this type of dialog box when we are doing web browsing, and often need a dialog when the user communicates with the application in two directions. The three dialogs of Avascript are obtained by invoking the three methods of the Window object, alert (), confirm (), and prompt (), which can be used to complete the input and output of JS and to achieve the JS code that interacts with the user. Today, the small part of the simple introduction of JS in the three kinds of pop-up dialog box, small series first alone on these several methods to explain in detail, and then, the comparison of these methods, well, start our JS trip it ' (*∩_∩*) ...
First Type: Alert () method
The alert () method is the easiest to use in these three dialog boxes, and she can be used to simply and clearly display the text information in the alert () parentheses in the dialog box, which we call the Alert dialog box, where the information to display is enclosed in parentheses, and the dialog box contains a "Confirm" button. Once the user has finished reading the displayed information, you can close the dialog box by simply clicking the button. Here's an example of using the alert () method, as shown in the following code:

Perform the small example above, pop up the dialog box on the page and display a sentence "Top of the line: the ancient wood withered under the Rocks Rock", as follows:

Next, click on the "Confirm" button to display the second dialog box and display "White water spring side girl wonderful!" ", the effect is as follows;

Pop up the dialog on the page and display a sentence "top line: Ancient wood withered under Rocks Rock", click the "Confirm" button and then display the 2nd dialog box and display "White water spring side of the girl wonderful!" "Let's analyze This little example:

A, call the alert () method two times in the <script> script block;

B, in each alert () in parentheses to add a piece of text information, run appears as shown in the page, when using the mouse click on the page "OK" button, the second page appears, and then click the "OK" button to close the dialog box on the page. Note: The two dialogs are displayed separately instead of one overwriting the other, because JS actually executes the first alert () and waits until the user clicks the "Confirm" button to execute the second alert (). Alert () is a method of the Js window object, which can be written as window.alert () or as alert (), which produces a dialog box with a confirmation button that shows the information in parentheses.


Second type: Confirm () method

The Confirm () method is very similar to the use of the alert () method, except that there is a "cancel" button in addition to a "Confirm" button in the dialog box called the confirmation dialog box, which calls the confirm () of the Window object. Method and the prompt () method described later can also not write window. Here's a small example of confirm (), as shown in the code below:

The display results are as follows:

Analyze This small example:
A, add the Confirm () method to the <script> script block,

b, a text message is added within confirm (), the effect is as shown, if the user clicks the Confirm button, the Confirm () method returns True, and if the user clicks the Cancel button, the Confirm () method returns false regardless of which button the user chooses , the dialog box is closed, and the JavaScript code continues to be executed. Click the "Confirm" or "Cancel" button is to close the dialog box, there seems to be no difference, in fact, whether you click the "Confirm" or "Cancel" button will return a Boolean value, so that there are some JS code behind the scenes to play the role of the button, please look at the following example, experience using confirm () Returns the beauty of a Boolean value. The code is as follows:

Let's examine this small example:
A, a variable con is declared in the <script> script block.
B, con=confirm () A sentence assigns the Boolean value returned by the Confirm () method to con.

C, the use of the value of con by the IF statement, the execution of different statements, the effect is as follows:

If you click the OK button on the confirmation box on the page, the page appears as shown:

If you click the Cancel button, the page appears as shown:

The Third type: Prompt () method

The alert () method is very similar to the Confirm () method in that it displays only the information that is already present, but the user cannot enter his or her own information, but prompt () can do this, not only to display the information, but also to provide a text box that asks the user to enter their own information using the keyboard, She also contains "confirm" or "Cancel" two buttons, if the user "Confirm" button, then the prompt () method returns the content that the user entered in the text box (is the string type) or the initial value (if the user did not enter the information); If the user clicks the Cancel button, prompt () The method returns NULL, which we call the dialog box, where she has the best interactivity in the three dialog boxes. Look at a small example: on the page two pop-up prompt dialog box, so that users can enter information, the code is as follows:

To run the above program, the effect is as follows:

Click OK, there will be so surprise nie:

We then click the OK button:

Then click the OK button:

Analyze This little example

A, two prompt () methods have been added to the <script> script block.
B. A text message is added to the first prompt () parenthesis.

C, Name=prompt () is to assign the information that the user entered in the text box to the variable name.


differences and connections between alert (), confirm (), prompt ():

alert box alert ()
Alert is a warning box, and only one button "OK" has no return value, and the warning box is often used to ensure that the user can get some information. When the warning box appears, the user needs to click the OK button to continue the operation. Syntax: alert ("text").


Confirmation Box confirm ()
Confirm is a confirmation box, two buttons, OK or Cancel, return True or false. The confirmation box is used to enable users to verify or accept certain information. When the confirmation box appears, the user needs to click the OK or Cancel button to continue the operation. If the user clicks Confirm, then the return value is true. If the user clicks Cancel, the return value is false. Syntax: Confirm ("text")


Cue box prompt ()
Prompt is a prompt box that returns the input message, or its default value hint box is often used to prompt the user to enter a value before entering the page. When the prompt box appears, the user needs to enter a value and then click the Confirm or Cancel button to continue the manipulation. If the user clicks Confirm, then the return value is the value entered. If the user clicks Cancel, the return value is null. Syntax: Prompt ("text", "Default value")

Small Series of words: The blog, the small part of the main introduction of JavaScript three pop-up dialog boxes, respectively, is the alert () method, confirm () method, Prompt () method, small series first on these methods are described in detail, followed by, Comparing these methods, in addition to these three pop-up dialogs, we can also use document.write () to directly display the message on the page, BS learning, to be continued ...

Three popup dialog boxes in JavaScript

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.