在日常开发过程中,我们经常使用 alert 来进行调试。但是 window 对象中,并非只有 alert 能展示弹窗的功能,接下来让我们一起看看还有那些原生的弹窗吧。gogogo ~~~

alert

  • 用于显示带有一条指定消息和一个确认按钮的警告框

  • 会阻止 js 向下执行代码

  • 无法修改按钮文案

  • 入参: 根据不同的入参展示不同的内容

    • string: 展示文本信息

    • number: 展示数字文本信息

    • {}: [object Object]

    • () => {}: () => {}

    • []: 不展示

  1. alert('这是一个弹窗信息');

confirm

  • 用于显示带有一条指定消息和一个确认按钮、一个取消按钮的警告框

  • 会阻止 js 向下执行代码

  • 无法修改按钮文案

  • 入参: 同 alert

  • 返回

    • 取消: false

    • 确定: true

confirm() 有返回数据的功能,所以可以用来做用户操作的确认功能

const isDelete = confirm('是否删除该条信息');

prompt

  • 用于显示可提示用户进行输入的对话框

  • 会阻止 js 向下执行代码

  • 无法修改按钮文案

  • 入参(text, defaultText)

    • text: 提示文案

    • defaultText: 输入框默认值

  • 返回

    • 取消: null

    • 确定: 输入框中的字符串

可用来获取用户提交的信息

const msg = prompt('请输入密码', 888888);
console.log(msg);