简易弹窗遮罩层

最新推荐文章于 2024-04-06 10:05:01 发布

马马虎虎敲可爱

最新推荐文章于 2024-04-06 10:05:01 发布

阅读量480

点赞数

分类专栏：前端实用案例文章标签：前端实用案例

本文链接：https://blog.csdn.net/Schrodinge/article/details/94655086

版权

前端实用案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

遮罩层弹窗经常用到，记录一下

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹窗</title>
	</head>
	<body>
		<div id="showBtn">点击出现</div>
		<div id="popup">
		    <div class="popup">
		        <div id="case">
		            <p class="txt">弹窗</p>
					<p class="btnBox"><button class="btn">确定</button></p>	            
		        </div>
		    </div>
		</div>
	</body>
</html>

css代码

			#popup {
			    display: none;
			}
			.popup{
			    position: absolute;
			    height: 100%;
			    width: 100%;
			    top: 0;
			    left: 0;
			    background-color: rgba(90, 90, 90, 0.5);
			    z-index: 1;
			    display:flex;
			    flex-direction:row;
			    justify-content:center;
			    align-items:center;
			}
			#case {
			    width:80%;
			    height:298px;
			    border-radius:16px;
				background: #fff;
			    z-index:2;
				display: flex;
				flex-direction:column;
				justify-content:center;
				align-items:center;
			}
			#case .txt{
			    width:80%;
			    height:50%;
			    font-size:32px;
			    color:rgba(51,51,51,1);
				display: flex;
				flex-direction:row;
				justify-content:center;
				align-items:center;
			}
			.btnBox{
				width:100%;
				height:50%;
				display: flex;
				flex-direction:row;
				justify-content:center;
				align-items:center;
			}
			#case .btn{
			    width:80%;
			    height:100%;
			    background:rgba(255,255,255,1);
			    border:2px solid rgba(238,238,238,1);
			    box-shadow:0px 2px 0px 0px rgba(238,238,238,1);
			    border-radius:16px;
			    font-size:32px;
			    color:rgba(54,186,26,1);
				display: flex;
				flex-direction:row;
				justify-content:center;
				align-items:center;
			}
			#showBtn{
				width: 100px;
				height: 100px;
				background: #1E8DFF;
				margin: auto;
			}

	 var popup = $("#popup")[0];
	$("#showBtn").on("click",()=>{
		popup.style.display= "block";
	})
	$(".btn").on("click",()=>{
		popup.style.display= "none";
	})

简单的弹窗遮罩层就完成了。

马马虎虎敲可爱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简易弹窗遮罩层

遮罩层弹窗经常用到，记录一下HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>弹窗</title> </head> <body> <div id="showBtn">点击出现</di...
复制链接

扫一扫

专栏目录