效果图：

在这里插入图片描述

实现原理：

  1. 将弹窗内容写在一个div里面，设置display属性为none
  2. 按钮点击绑定事件，将上述div的display属性改为block

HTML代码

	<body>
		<p>示例弹出页：
			<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
				请点这里
			</a>
		</p>
		<div id="light" class="white_content">
			<div id="font_login">Login in</div>
			<!-- 登陆部分代码 -->
			<form action="" method="post" id="form_submit">
				账号：<input type="text" name="" id="name" value="" /></br>
				密码：<input type="password" name="" id="password" value="" /></br>
				<input type="button" value="确认" class="button_beautiful ceshi" /> <!-- 不要点击 -->
				<input type="button" value="取消" class="button_beautiful" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" />
			</form>
		</div>
		<div id="fade" class="black_overlay"></div>
	</body>

CSS代码：

			.black_overlay {
				display: none;
				/* 此元素不会被显示*/
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: #bbbbbb;
				z-index: 1001;
				/* z-index 属性设置元素的堆叠顺序。*/
				opacity: .80;
				/* opacity 属性设置元素的不透明级别。*/
			}

			.white_content {
				display: none;
				position: absolute;
				top: 20%;
				border: 1px solid #bbbbbb;
				border-radius: 20px;
				background-color: white;
				z-index: 1002;
				/*层级要比.black_overlay高，这样才能显示在它前面*/
				overflow: auto;
			}

			#light {
				position: absolute;
				left: 50%;
				/* top: 50%; */
				width: 300px;
				height: 250px;
				margin-left: -150px;
				/* margin-top: -125px */;
			}

			#form_submit {
				text-align: center;
				margin-left: 10px;
				margin-top: 10px;
			}

			#font_login {
				font-weight: 400;
				font-size: 24px;
				color: #BBBBBB;
				text-align: center;
				margin-top: 20px;
			}

			.button_beautiful {
				width: 60px;
				height: 34px;
				/* 高度 */
				border-width: 0px;
				border-radius: 6px;
				background: #4ECDC4;
				cursor: pointer;
				outline: none;
				color: white;
				font-size: 16px;
				margin-top: 20px;
			}
		</style>

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.black_overlay {
				display: none;
				/* 此元素不会被显示*/
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: #bbbbbb;
				z-index: 1001;
				/* z-index 属性设置元素的堆叠顺序。*/
				opacity: .80;
				/* opacity 属性设置元素的不透明级别。*/
			}

			.white_content {
				display: none;
				position: absolute;
				top: 20%;
				border: 1px solid #bbbbbb;
				border-radius: 20px;
				background-color: white;
				z-index: 1002;
				/*层级要比.black_overlay高，这样才能显示在它前面*/
				overflow: auto;
			}

			#light {
				position: absolute;
				left: 50%;
				/* top: 50%; */
				width: 300px;
				height: 250px;
				margin-left: -150px;
				/* margin-top: -125px */;
			}

			#form_submit {
				text-align: center;
				margin-left: 10px;
				margin-top: 10px;
			}

			#font_login {
				font-weight: 400;
				font-size: 24px;
				color: #BBBBBB;
				text-align: center;
				margin-top: 20px;
			}

			.button_beautiful {
				width: 60px;
				height: 34px;
				/* 高度 */
				border-width: 0px;
				border-radius: 6px;
				background: #4ECDC4;
				cursor: pointer;
				outline: none;
				color: white;
				font-size: 16px;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<p>示例弹出页：
			<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
				请点这里
			</a>
		</p>
		<div id="light" class="white_content">
			<div id="font_login">Login in</div>
			<!-- 登陆部分代码 -->
			<form action="" method="post" id="form_submit">
				账号：<input type="text" name="" id="name" value="" /></br>
				密码：<input type="password" name="" id="password" value="" /></br>
				<input type="button" value="确认" class="button_beautiful ceshi" /> <!-- 不要点击 -->
				<input type="button" value="取消" class="button_beautiful" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" />
			</form>
		</div>
		<div id="fade" class="black_overlay"></div>
	</body>
</html>
# css # html # css3 # javascript
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

每日AI学习笔记----Qwen3-Omni 、HuatuoGPT-o1医学复杂推理

最近作者开始上班了~上班两个多月，终于也是找到一点点工作的节奏~~。也深感到自己的不足，常在思考，选择这个行业是否正确，但是既然选择了，那么去深入也是乐趣所在。没有什么比静下心来学习能让你更踏实。浮躁了就去学习，想谈恋爱了就去学习，烦了就去学习吧，孩子。因此作者决定只要工作不加班到很晚，每天都要坚持至少一小时的AI新知识和技术的学习。

avatar 2048 AI社区
cover

AI 智能体开发的 6A 原则：从需求到落地的全链路方法论

avatar 2048 AI社区

自定义Traits应用

重新排列范围，使得指定位置的元素等于排序后的元素，并且左边的元素都不大于它，右边的元素都不小于它。算法的原理是 “覆盖” 要删除的元素，将保留的元素移到前面，返回新的逻辑尾迭代器，但。对范围内的每个元素应用一个函数，并将结果存储在另一个范围内。移除范围内连续的重复元素，返回新的逻辑结尾迭代器。旋转范围内的元素，使中间元素成为新的第一个元素。这些算法不会改变它们所操作的容器中的元素。这些算法会修改它

avatar 2048 AI社区