JavaScript中常用的3种弹窗(警告框、确认框、提示框)
作者：浮生_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常用弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！