JavaScript中常用的3种弹窗(警告框、确认框、提示框)
更新时间：2023年09月19日 10:50:16 作者：浮生_Lee
JavaScript提供了几种常用的弹窗方法,用于与用户进行交互或显示提示消息,这篇文章主要给大家介绍了关于JavaScript中常用的3种弹窗的相关资料,分别包括警告框、确认框、提示框,需要的朋友可以参考下
JavaScript 中可以创建三种消息框：警告框、确认框、提示框。
一、alert（警告框）
alert()方法是显示一条弹出提示消息和确认按钮的警告框。
需要注意的是 ：alert()是一个阻塞的函数，如果我们不点确认按钮，后面的内容就不会加载出来。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>alert是阻塞的函数</p>
<p>这句话只有在确认弹出框的提示文本后才会显示</p>
</body>
<script>
alert("这是弹出框提示文本")
</script>
</html>注意:
1. 在点击对话框"确定"按钮前，不能进行任何其它操作。
2. 消息对话框通常可以用于调试程序。
3. alert输出内容，可以是字符串或变量，与document.write 相似。
二、confirm（确认框）
confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。
如果点击"确定"返回true，否则返回false。
代码演示：
var x;
var r=confirm("请按下按钮!");
if (r==true){
x="你按下的是\"确定\"按钮。";
}
else{
x="你按下的是\"取消\"按钮。";
}
document.write(x)三、prompt (提示框)
prompt()方法是显示提示用户进行输入的对话框。
这个方法返回的是用户输入的字符串。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
//方式一
prompt("开心吗?"); // 这个显示内容也可以不写，但就没有交互的意义了。
//方式二
var x;
var name=prompt("请输入你的名字","Keafmd"); //显示默认文本 "Keafmd"
if (name!=null && name!=""){
x="你好! " + name + "。";
document.write(x)
}
</script>
<title></title>
</head>
<body>
</body>
</html>附：window.prompt的确定和取消事件
在使用window.prompt弹窗时，怎么判断用户是否输入内容？又怎么区分用户不输入内容的情况下点击的是“确定”还是“取消”？
var reason = window.prompt(“请输入审核不通过理由：”, “”);
//1. 单纯判断用户是否填写“审核不通过理由”：
if(reason){
//用户填写了理由
}else{
//用户没有填写理由
}
//2. 要区分用户不输入内容点击的是“确定”还是“取消”：
if(reason){
alert(reason);//显示输入内容
//用户填写了内容并且点击的是“确定”
}else if(reason === “”){
//用户没有输入内容点击的“确定”
}else{
//点击的是“取消”
}window.prompt点击“确定”返回输入框中的值，不输入内容点击“确定”返回的是“”（前提是你在prompt时要加一个默认的”“返回值，参考上面代码），点击“取消”返回的是null。
总结
到此这篇关于JavaScript中常用的3种弹窗的文章就介绍到这了,更多相关JS常用弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了js中的面向对象的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了JavaScript的事件流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了原生JavaScript实现瀑布流布局的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要为大家详细介绍了QML实现圆环颜色选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
JavaScript实现简易的天数计算器实例【附demo源码下载】
这篇文章主要介绍了JavaScript实现简易的天数计算器,结合实例形式分析了javascript日期与时间计算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了Js操作树节点自动折叠展开的几种方法,需要的朋友可以参考下2014-05-05
javascript(jquery)利用函数修改全局变量的代码
现在博客系统的评论遇到一个问题，用户点击“最后一页”链接之后就自动调取最后一页的资料来显示。2009-11-11
微信二次分享报错invalid signature问题及解决方法
基于微信公众号开发的h5页面（使用jssdk接口），由用户A分享给用户B，用户B再次分享这个页面时，不能成功分享。这篇文章主要介绍了微信二次分享报错invalid signature问题及解决方法,需要的朋友可以参考下2019-04-04
现在网上有非常多的Promise文章，但都是给你一堆代码，或者某些核心代码，让你看完之后感觉，嗯，很厉害，但还是不知所云，不知其所以然。那么本文真正从一个小白开始带你深入浅出，一步一步实现自己的 Promise，这种自己造轮子的过程一定是进步最快的过程，快上车开始吧2022-10-10
在实际的开发工作过程中，积累了一些常见又超级好用的 Javascript 技巧和代码片段，包括整理的其他大神的 JS 使用技巧，今天筛选了 9 个，以供大家参考2023-04-04
最新评论