JavaScript中的三种弹窗方式

最新推荐文章于 2023-12-26 10:38:41 发布

ErwinLIU

最新推荐文章于 2023-12-26 10:38:41 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/qq_41717185/article/details/108054686

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript中的三种弹窗方式：只含确认按钮的弹框，含确认和取消按钮的弹框，以及允许用户输入内容的弹框。通过实例展示了如何使用这些弹窗，并提供了测试结果。

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

JavaScript中的三种弹窗方式

1.只是含有确认按钮的弹框

function  demo1(){
				//只是含有确认按钮的弹框
				window.alert("好好学习，天天向上");		
			}

效果测试
在这里插入图片描述

2.含有确认和取消按钮的弹框

function  demo2(){		
				//含有确认和取消按钮的弹框
				var flag= window.confirm("是否删除？");		
				alert(flag);
			}

其中Var falg接收用户的布尔类型返回值

测试结果如下
在这里插入图片描述
当用户点击确定按钮时：

在这里插入图片描述
点击取消按钮时

在这里插入图片描述

3.可以输入内容的弹窗

		    function  demo3(){
		    	//含有输入内容的弹框
		    	var   v= window.prompt("请输入昵称","例如：李白"); 	
		    	alert(v);
		    }

测试结果如下：

在这里插入图片描述
重新指定输入文本为张飞

返回结果为：
在这里插入图片描述

完整网页代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			/*三种弹框方式*/
			function  demo1(){
				//只是含有确认按钮的弹框
				window.alert("好好学习，天天向上");		
			}
			function  demo2(){		
				//含有确认和取消按钮的弹框
				var flag= window.confirm("是否删除？");		
				alert(flag);
			}
		                function  demo3(){
		    	//含有输入内容的弹框
		    	var   v= window.prompt("请输入昵称","例如：李白"); 	
		    	alert(v);
		    }

		</script>
		
	</head>
	<body>
	

<input type="button" name="" id="" value="弹框一" onclick="demo1()" />
		
<input type="button" name="" id="" value="弹框二" onclick="demo2()" />
		
<input type="button" name="" id="" value="弹框三" onclick="demo3()" />
		
</body>
</html>