弹出框 dialog带遮罩

最新推荐文章于 2022-06-14 22:29:42 发布

编程周记

最新推荐文章于 2022-06-14 22:29:42 发布

阅读量365

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/x18094/article/details/115594367

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

弹出框 dialog

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹窗遮罩1</title>
		<script src="js/jquery-1.9.1.min.js"></script>
		<style>

			/* 登录弹窗 */
		#login{
		    height: 100%;
		    width: 100%;
		}
		#login .mask{
		    height: 100%;
		    width: 100%;
		    position: fixed;
		    top: 0;z-index: 1000;
			background-color: #000;
			opacity: 0.5;
		}

		.btn {
		  
		    -webkit-font-smoothing: antialiased;
		    -webkit-box-direction: normal;
		    display: inline-block;
		    line-height: 1;
		    white-space: nowrap;
		    cursor: pointer;
		    background: #fff;
		    border: 1px solid #dcdfe6;
		    -webkit-appearance: none;
		    text-align: center;
		    box-sizing: border-box;
		    outline: none;
		    margin: 0;
		    transition: .1s;
		    font-weight: 500;
		    -webkit-user-select: none;
		    color: #fff;
		    background-color: #409eff;
		    border-color: #409eff;
		    padding: 7px 15px;
		    font-size: 12px;
		    border-radius: 3px;
			 }

		/* 弹窗 */
		.dialog {
		   width: 387px;
		   height: 298px;
		   position: fixed;
		   top: 50%;
		   left: 50%;
		   transform: translate(-50%,-50%);
		   z-index: 1001;
		   background-color: #fff;
		   box-sizing: border-box;
		   padding: 0;
		   border: solid 2 grey;
		}
		/* 弹窗标题 */
		.dialog .dialog_title{
			background-color: ghostwhite;
			 font-size:14pt;
			 font-weight:bold;
			 padding:4px 6px;
			/* border-bottom: solid 0.05px grey; */
		}
		/* 弹窗关闭按钮 */
	.dialog .dialog_title .close{
		    cursor: pointer;
			background: #fff url(img/close.png)  no-repeat 3px  0;
			float: right;
			width: 10px;
			height: 12px;
			margin-top:5px ;
			padding-right: 6px;
		}
		.dialog .dialog_body{
			padding: 6px 6px; /* top left */
		}
		
		</style>
	</head>
	<body>
		<div>
			<p><input id="open" class="btn" type="button" value="弹出"></p>
		</div>
		<!-- 登录弹窗 -->
		<div id="login">
			<!-- 遮罩 -->
			<div class="mask"></div>
			<!-- 弹出框 -->
			<div class="dialog">
				<div class="dialog_title">我是标题
					<i class="close"></i>
				</div>
				<div class="dialog_body">
					我是内容啊，今天真是个好日子！</br>请问你是🐖吗????????????
				</div>
			</div>
		</div>


	</body>
</html>
<script>
	$(document).ready(function() {
		$("#open").click(function() {
			login.style.display = "block"; //显示遮罩层
		})
		$(".close").click(function() {
			login.style.display = "none"; //隐藏遮罩层
		})
	})
</script>

效果图：

close图标可以暂时用字母X代替

<i class="close">x</i>

编程周记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹出框 dialog带遮罩

弹出框 dialog<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>弹窗遮罩1</title> <script src="js/jquery-1.9.1.min.js"></script> <style> /* 登录弹窗 */ #login{ height: 100%; .
复制链接

扫一扫