前端 JavaScript 弹窗介绍

欢迎点击「算法与编程之美」关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

在浏览网页时我们经常会遇见弹窗，但我们可能只知道弹窗，但我们是否知道在JavaScript中弹窗分几类，我们应该使用什么实现它。其实在JavaScript中弹窗分三种：警告框、确认框、提示框，接下来我们将从这三个方面进行介绍和学习。

解决方案

1.警告框（alert()框）

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：

window.alert() 方法可以不带上window对象，直接使用alert()方法。

例子：

效果：

在上述例子中，我们可以看出，在alert()内输入的文字会显示在弹出框中；而在input中的value属性中的文字则为按钮的名字。alert()框区别于其他的弹出框，它只有确定一个按钮，只有点击确认才能继续操作。

2.确认框（confirm框）

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 "确认" 或者 "取消"来确定用户操作。

当你点击 "确认",确认框返回 true， 如果点击 "取消", 确认框返回 false。

语法：

window.confirm() 方法可以不带上window对象，直接使用confirm()方法。

例子：

效果：

区别于alter（）框写在header中，确认框我们写在了body里面。在标签中写入的文字会出现在按钮上，相当于对按钮进行了命名，同时我们会使用到if语句，对于弹出框的“确认”和“取消”按钮链接的操作进行接下来的实现。

3.提示框（prompt（）框）

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：

window.prompt() 方法可以不带上window对象，直接使用prompt()方法。

效果：

提示框通常可以在框内输入一些文本，同时我们还可以根据需要对提示框进行设定，提示输入框的相关信息等等。

结语

警告框只起到一个提示的作用，同时使用者只有一个确认选项；确认框与警告框差别不大，但是它会为使用者提供确认和取消两个选项提示框，即是给出了两种选择；最后一个提示框是在两者的基础上又增加了一个文本栏，即在此处我们可以输入文字，收集使用者的信息。弹窗有不同的类型，我们在实现网页弹窗的时候，可以根据我们的大致的需要选择适合的弹窗的模板，再增加我们自己的东西。

END

实习编辑 | 王楠岚

责 编 | 杨金月