js中弹框有那些，提示框、请求成功弹窗、请求失败弹框等

天香自然，地上红豆

于 2024-06-04 21:57:39 发布

阅读量176

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/tianxianghuiwei/article/details/139454299

版权

我这里写的是个人推荐仅供参考：

效果图：

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.3.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.hinte {
				width: 320px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color:#F0F9EB ;
				color:#6BC440;
				border-radius: 5px;
				position: fixed;
				top: 20px;
				left: calc(50% - 160px);
				z-index: 999;
				display: none;
			}
			/* 失败 */
			.hintes {
				width: 320px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color:#FEF0F0;
				color: red; 
				border-radius: 5px;
				position: fixed;
				top: 20px;
				left: calc(50% - 160px);
				z-index: 999;
				display: none;
			}
			/* 提示 */
			.hinted {
				width: 320px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color: #FDF6EC;
				color: #ffe042;
				border-radius: 5px;
				position: fixed;
				top: 20px;
				left: calc(50% - 160px);
				z-index: 999;
				display: none;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<button onclick="detrusion()">成功弹框</button>
			<button onclick="detrusions()">失败弹框</button>
			<button  onclick="detrusionss()">提示弹框</button>
			<!-- 成功弹框 -->
			<div class="hinte">成功弹框</div>
			<!-- 失败弹框 -->
			<div class="hintes">失败弹框</div>
			<!-- 提示弹框 -->
			<div class="hinted">提示弹框</div>
			
			<script>
				function detrusion() {
					$(".hinte").slideToggle().text('成功弹框').fadeIn();
					setTimeout(() => {
						$(".hinte").slideToggle();
						
					}, 2000)
					
					
				}
				function detrusions() {
					$(".hintes").slideToggle().text('失败弹框').fadeIn();
					setTimeout(() => {
						$(".hintes").slideToggle();
						
					}, 2000)
					
				}
				function detrusionss() {
					$(".hinted").slideToggle().text('提示弹框').fadeIn();
					setTimeout(() => {
						$(".hinted").slideToggle();
					
					}, 2000)
					
				}
			</script>
		</div>
	</body>
</html>

以上内容仅供大家参考,希望可以帮到大家；