html实现弹窗

最新推荐文章于 2025-07-01 22:25:03 发布

原创最新推荐文章于 2025-07-01 22:25:03 发布 · 8.5w 阅读

213 ·

CC 4.0 BY-SA版权

文章标签：

#html #js

前端js 专栏收录该内容

10 篇文章

订阅专栏

博主上午闲来无事，使用HTML和原生JS编写了一个弹窗，并表示代码可直接使用，欢迎大家指出不足。

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

上午闲来无事，用html及原生js写个弹窗，供参考。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
			}
			.zhezhao{
				position: fixed;
				left: 0px;
				top: 0px;
				background: #000;
				width: 100%;
				height: 100%;
				opacity: 0.5;
			}
			.tankuang{
				position: relative;
				background: #fff;
				width: 50%;
				height: 80%;
				border-radius: 5px;
				margin: 5% auto;
			}
			#header{
				height: 40px;
			}
			#header-right{
				position: absolute;
				width: 25px;
				height: 25px;
				border-radius: 5px;
				background: red;
				color: #fff;
				right: 5px;
				top: 5px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="dianwo()">点我</button>
		<div class="zhezhao" id='zhezhao'>
			<div class="tankuang">
				<div id="header">
					<span>我是弹窗</span>
					<div id="header-right" onclick="hidder()">x</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			document.getElementById('zhezhao').style.display="none";
			function dianwo(){
				document.getElementById('zhezhao').style.display="";
			}
			function hidder(){
				document.getElementById('zhezhao').style.display="none";
			}
		</script>
	</body>
</html>

代码可直接拿来用，不足请指出。