JavaScript弹出对话框的三种方式-alert()-confirm()-prompt()

一、alert()警告框（确定）alert()方法是显示一条弹出提示消息和确认按钮的警告框。需要注意的是：alert()是一个阻塞的函数，如果不点确认按钮，后面的内容就不会加载出来。使用方式：alert(“想要提示的文本内容”)点击确定按钮之后实现代码：<!DOCTYPE html><html lang="en"><head><meta charset=

weixin_45819980

7798人浏览 · 2020-12-14 11:53:41

weixin_45819980 · 2020-12-14 11:53:41 发布

一、alert()警告框（确定）

alert()方法是显示一条弹出提示消息和确认按钮的警告框。
需要注意的是：
alert()是一个阻塞的函数，如果不点确认按钮，后面的内容就不会加载出来。
使用方式：
alert(“想要提示的文本内容”)

在这里插入图片描述
点击确定按钮之后
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>alert是一个阻塞的函数</p>
    <p>点击弹出框确定按钮之后这句话才会显示</p>

    <script>
        alert("这是弹出框提示文本")
    </script>
</body>
</html>

二、confirm()弹出个确认框（确定，取消）

confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。
如果点击"确定"返回true，否则返回false。
使用方式：
（1）不接收返回值：
confirm(“这样写可以直接显示,不接收返回值。”)
（2）接收返回值：
var x;
var r=confirm(“请按下按钮!”);
if (r==true){
x=“你按下的是"确定"按钮。”;
}
else{
x=“你按下的是"取消"按钮。”;
}
document.write(x)

第1种方式：
在这里插入图片描述第2种方式：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //使用方式1
        confirm("这种方式可直接显示，不接收返回值")

        //使用方式2
        var x;
        var r = confirm("请按下按钮！")
        if(r==true){
            x = "你按下的是\"确定\"按钮。";
        }else{
            x = "你按下的是\"取消\"按钮。"
        }
        document.write(x)
    </script>
</body>
</html>

三、prompt()提示框（弹出个输入框让你输入东西）

prompt()方法是显示提示用户进行输入的对话框。
这个方法返回的是用户输入的字符串。
使用方式：
（1）不显示默认文本：
prompt(“开心吗?”); // 这个显示内容也可以不写，但就没有交互的意义了。
（2）显示默认文本：
var x;
var name=prompt(“请输入你的名字”,“Keafmd”);
if (name!=null && name!=""){
x="你好! " + name + “。”;
document.write(x)
}

第1种方式：
在这里插入图片描述第2种方式：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //使用方式1不显示默认文本
        prompt("高兴吗？")
       
        //使用方式2显示默认文本
       var x;
       var name = prompt("请输入你的名字","zxf");
       if(name!=null && name!=""){
            x = "你好" + name + "！";
            document.write(x)
       }
        
    </script>
</body>
</html>

prompt()和alert()配合使用：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var name,age;
        name=prompt( "请问你叫什么名字?" ); /*在页面上弹出提示对话框，
        将用户输入的结果赋给变量name*/
        alert(name); //输出用户输入的信息
        age=prompt( "你今年多大了?" , "请在这里输入年龄" ); /*在页面上再一次弹出提示对话框，
        讲用户输入的信息赋给变量age*/
        alert(age) //输出用户输入的信息 
        
    </script>
</body>
</html>

alert()、confirm()、prompt()的区别和联系：
可以使用警告、确认和提示消息框来获得用户的输入。
（1）alert()警告框

alert是警告框，只有一个按钮“确定”无返回值，警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert(“文本”)。

（2）confirm()确认框

confirm是确认框，两个按钮，确定或者取消，返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：confirm(“文本”)。

（3）prompt()提示框

prompt是提示框，返回输入的消息，或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法：prompt(“文本”,“默认值”)。

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

如何卸载openclaw

OpenClaw（俗称"龙虾"）是一个本地 AI 智能体平台，用于在电脑上部署自主运行的 AI 代理。

AI Agent技术社区

（已解决）安装openclaw龙虾[特殊字符]npm权限问题EACCES

先安装升级完成node和homebrew后。安装就很快了。但是遇到EACCESS问题！！！发现报错了。问题错误：核心问题是sharp解决（90%人遇到的）安装 macOS 编译工具很多人缺少，导致sharp无法编译。运行：xcode-select --install安装完成后重新执行：sharp编译需要 C++ 编译器和 node-gyp，这些都来自 Xcode CLI。