JS消息弹框alert、confirm、prompt的实现代码

 更新时间:2022年09月26日 14:16:29   作者:姓蔡小朋友  
这篇文章主要介绍了JS消息弹框alert、confirm、prompt,文中还给大家介绍了js的三大基础弹框,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下

alert 消息提示框:

用于警告,只有确定按钮。

alert(str);

confirm 消息对话框:

通过返回值可以判断用户点击了什么按钮

confirm(str);

当用户点击"确定"按钮时,返回true。
当用户点击"取消"按钮时,返回false。

prompt()消息输入框:

弹框中包含一个输入框和确认取消按钮,用户可以在输入框输入内容。

var reason = window.prompt(“请输入审核不通过理由:”, “”);

//1. 单纯判断用户是否填写“审核不通过理由”: 
if(reason){ 
//用户填写了理由 
}else{ 
//用户没有填写理由 
}

//2. 要区分用户不输入内容点击的是“确定”还是“取消”: 
if(reason){ 
alert(reason);//显示输入内容
//用户填写了内容并且点击的是“确定” 
}else if(reason === “”){ 
//用户没有输入内容点击的“确定” 
}else{ 
//点击的是“取消” 
}

补充:js的3大基础弹框

js的3大基础弹框:
    1. 提示框(警告框): alert("内容");
            弹框有一个确定按钮, 无返回值
       示例:alert("弹框内容!")

    2. 确认框: confirm("提示内容");
            弹框有2个按钮: 确定/取消
            点击确定返回true, 点击取消返回false
 示例1: confirm("提示内容")
 示例2: <a href="http://www.taobao.com" οnclick="return confirm('逛淘宝吗?')">去淘宝</a>

    3. 输入框: prompt(参数);
            参数1: 提示语句. 默认无提示
            参数2: 默认值. 不同的浏览器默认值不一样.
            返回值类型为 字符串
输入框示例:

<script>
    // var str = prompt();
    var str = prompt("请输入姓名", "");
    document.writeln("您输入的是:" + str);
</script>

到此这篇关于JS消息弹框alert、confirm、prompt的文章就介绍到这了,更多相关js消息弹框alert内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js设置文字颜色的方法示例

    js设置文字颜色的方法示例

    这篇文章主要介绍了js设置文字颜色的方法,涉及JS页面元素样式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • JS+CSS 制作的超级简单的下拉菜单附图

    JS+CSS 制作的超级简单的下拉菜单附图

    下拉菜单想必大家都有见到过吧,在本文将为大家介绍个不错的示例,超简单的,大家可以参考下哦
    2013-11-11
  • js拖拽的原型声明和用法总结

    js拖拽的原型声明和用法总结

    这篇文章主要为大家详细介绍了js拖拽的原型声明和用法总结,感兴趣的朋友可以参考一下
    2016-04-04
  • 配置Webpack SourceMap 实践教程

    配置Webpack SourceMap 实践教程

    这篇文章主要介绍了如何配置Webpack SourceMap,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • webpack4 升级迁移的实现

    webpack4 升级迁移的实现

    这篇文章主要介绍了webpack 4 升级迁移的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 微信小程序tabbar底部导航

    微信小程序tabbar底部导航

    这篇文章主要为大家详细介绍了微信小程序重写tabbar底部导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • webpack v4 从dev到prd的方法

    webpack v4 从dev到prd的方法

    这篇文章主要介绍了webpack v4 从dev到prd的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 深入理解JavaScript系列(2) 揭秘命名函数表达式

    深入理解JavaScript系列(2) 揭秘命名函数表达式

    网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点
    2012-01-01
  • 细说webpack源码之compile流程-rules参数处理技巧(1)

    细说webpack源码之compile流程-rules参数处理技巧(1)

    webpack作为一种流行的打包工具被广泛应用在web项目的前端工程化构建中。下面通过本文给大家介绍webpack源码之compile流程-rules参数处理技巧,感兴趣的朋友一起看看吧
    2017-12-12
  • JS验证日期的格式YYYY-mm-dd 具体实现

    JS验证日期的格式YYYY-mm-dd 具体实现

    这篇文章介绍了JS对日期格式的验证实例,有需要的朋友可以参考一下
    2013-06-06

最新评论