javascript系列之对话框

鱼馅饼

已于 2023-08-09 17:50:02 修改

阅读量530

点赞数

文章标签： javascript 前端开发语言

于 2023-08-09 17:38:31 首次发布

原文链接：https://www.tutorialspoint.com/javascript/javascript_dialog_boxes.htm

版权

一.欢迎来到我的酒馆

javascript支持3种类型的对话框。这些对话框一般用来触发、警报或者确认用户的任何输入或者从用户那里获得某种输入。在这里，我们将一个个的介绍每个对话框。

二.alert对话框

2.1 alert对话框大部分用来提示一些警告信息给用户。例如，假定一个input输入框需要用户输入但是用户没有输入任何内容，这时作为一个验证功能，你可以使用alert对话框提示一些警告信息给用户。
尽管如此，一个alert对话框可以使用友好的信息提示，alert对话框仅会提供一个确认按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function Warn(){
            alert("警告提示信息");
            document.write("这是一个warning 信息");
        }
    </script>
</head>
<body>
    <p>点击下面的按钮，以显示提示信息</p>
    <input type="button" onclick="Warn()" value="click me">
</body>
</html>

三.Confirmation对话框

confirmation对话框通常用来征得用户同意，这个对话框会显示两个按钮：OK或者Cancel按钮。
如果用户点击了OK按钮，window方法confirm()将会返回true；如果用户点击了Cancel按钮，confirm()方法将会返回false。下面的例子演示了confirmation对话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function getConfirmation(){
            let value = window.confirm("Do you want to continue?");
            if(value == true){
                document.write("user wants to continue!");
                return true;
            }else{
                document.write("user dose not want to continue!");
            }
            return false;
        }
    </script>

</head>
<body>
    <p>点击下面的按钮，以显示内容：</p>
    <input type="button" value="click me" onclick="getConfirmation()">
</body>
</html>

四.prompt对话框

4.1prompt对话框在获取用户的输入上面非常有用。因此，它可以使得你和用户进行交互，而用户需要填写一段内容，然后点击OK按钮。
使用prompt()方法显示一个对话框，这个方法使用了两个参数，一个参数是要显示在文本对话框的信息，一个是默认要显示在文本框的信息。
prompt对话框有两个按钮，OK和Cancel，如果用户点击了OK按钮，则会返回在文本框输入的内容；如果用户点击了Cancel按钮，将会返回null。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function UsePrompt(){
            let value = window.prompt("请输入内容：","默认显示的内容");
            document.write("输入的内容："+value+"<br/>");
        }
    </script>
</head>
<body>
    <p>点击下面的按钮，在弹出的对话框种输入内容：</p>
    <input type="button" value="click me" onclick="UsePrompt()">
</body>
</html>

鱼馅饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript系列之对话框

例如，假定一个input输入框需要用户输入但是用户没有输入任何内容，这时作为一个验证功能，你可以使用alert对话框提示一些警告信息给用户。在这里，我们将一个个的介绍每个对话框。prompt对话框有两个按钮，OK和Cancel，如果用户点击了OK按钮，则会返回在文本框输入的内容；使用prompt()方法显示一个对话框，这个方法使用了两个参数，一个参数是要显示在文本对话框的信息，一个是默认要显示在文本框的信息。尽管如此，一个alert对话框可以使用友好的信息提示，alert对话框仅会提供一个确认按钮。
复制链接

扫一扫