JavaScript中比较常见的几种弹窗

瑞崽崽崽

已于 2023-10-11 07:54:10 修改

阅读量4.1k

点赞数 8

文章标签： javascript 开发语言 ecmascript

于 2023-09-18 09:52:39 首次发布

本文链接：https://blog.youkuaiyun.com/lrx276/article/details/132964279

版权

本文介绍了JavaScript中的alert,confirm,prompt三种弹窗函数，分别用于警告、确认操作和提示用户输入。alert可能导致程序阻塞，confirm用于决策选择，prompt则允许用户输入。提醒开发者应谨慎使用并提供更好的用户交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、alert（警告框）
二、confirm（确认框）
三、prompt (提示框)

一、alert（警告框）

alert （）是一种弹窗，他是直接在满足他的条件的情况下直接他弹出的，但是这个弹出窗的弊端也是多多，alert（）弹出窗只有一个确认按钮，所以不适用于需要用户抉择的情况下，我们尽量不用alert（）弹窗，应该各位都知道，当代码走到alert的时候他会直接阻止整个程序的运行，如果我们不点确认按钮，后面的内容就不会加载出来

代码演示：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>alert是阻塞的函数</div>
		<div>这句话在点击确认弹出框的提示文本后才会显示</div>
	</body>
    <script>
		alert("弹出框文本")
	</script>
</html>、

二、confirm（确认框）

confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。
如果点击"确定"返回true，否则返回false，这个弹窗可以让客户用来进行一些抉择，比如删除按钮可以来一个confirm（），让客户可以选择是否删除，以防误触

代码演示：


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>

温馨提示，大家最好还是直接写一个弹窗，也费不了多长时间，还方便使用