Three pop-up dialogs of javascript alert, confirm and prompt

The first: alert() method

The alert() method is the easiest to use of the three dialog boxes. It can be used to simply and clearly display the text information in the alert() brackets in the dialog box. We call it an alert dialog box. The information to be displayed is enclosed in parentheses, and the dialog contains an "OK" button that the user can simply click to close the dialog after reading the displayed information. Let's take a look at an example of using the alert() method. The code is as follows:
write picture description here
The second: confirm() method
The use of the confirm() method is very similar to the alert() method, except that the dialog box contains In addition to a "Confirm" button, there is also a "Cancel" button. This kind of dialog box is called a confirmation dialog box. You can also not write window when calling the confirm() method of the window object and the prompt() method described later. Let's take a look at a small example about confirm(), the code is as follows: The
write picture description here
third: prompt() method
The alert() method is very similar to the confirm() method, both only display the existing information, but the user You can't enter your own information, but prompt() can do this. She can not only display the information, but also provide a text box to ask the user to enter his own information using the keyboard, and she also contains "confirm" or "cancel" two. a button, if the user "confirms" the button, the prompt() method returns the content entered by the user in the text box (string type) or the initial value (if the user does not enter information); if the user clicks the "Cancel" button, Then the prompt() method returns null, and we call this kind of dialog box a prompt box. Among these three dialog boxes, her interactivity is the best.

Look at the following small example: pop up a prompt dialog box twice on the page, so that the user can input relevant information, the code is as follows:
write picture description here
Three code examples are as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="alertObject()">警告框alert</button>
    <button onclick="confirmObject()">确认框confirm</button>
    <button onclick="promptObject()">提示框prompt</button>
    <script type="text/javascript">
    // 1.警告框alert() 
    alertObject=function(){
        alert("上联：山石岩下古木枯");//在页面上弹出上联
        alert("下联：白水泉边少女妙");//在页面上弹出下联
    }
    // 2.确认框confirm()
    confirmObject=function(){
        var con;
        con=confirm("你喜欢玫瑰花么?"); //在页面上弹出对话框
        if(con==true)
            alert("非常喜欢!");
        else 
            alert("不喜欢!");
    }
    // 3.提示框prompt() 
    promptObject=function(){
        var name,age;
        name=prompt("请问你叫什么名字?"); /*在页面上弹出提示对话框，
        将用户输入的结果赋给变量name*/
        alert(name); //输出用户输入的信息
        age=prompt("你今年多大了?","请在这里输入年龄"); /*在页面上再一次弹出提示对话框，
        讲用户输入的信息赋给变量age*/
        alert(name+":"+age);
    }
    </script>
</body>
</html>

Three pop-up dialogs of javascript alert, confirm and prompt

Guess you like