学习
实践
活动
专区
工具
TVP
写文章

前端 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

实习编辑 | 王楠岚

责 编 | 杨金月

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191112A0040700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券