HTML 弹出框代码示例 - 简单易用

<!DOCTYPE html>
<html>
<head>
	<title>弹框页面</title>
	<style>
		.overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
		}
<pre><code>	.popup {
		background-color: #fff;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		max-width: 500px;
		max-height: 500px;
		overflow: auto;
		text-align: center;
	}

	.close-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class='overlay'>
		<div class='popup'>
			<h2>这是一个弹框页面</h2>
			<p>你可以在这里添加任何内容，比如表单、图片、视频等。</p>
			<p>点击下面的按钮关闭弹框。</p>
			<button class='close-btn'>关闭</button>
		</div>
	</div>
<pre><code>&lt;script&gt;
	// 获取弹框和关闭按钮
	var overlay = document.querySelector('.overlay');
	var closeBtn = document.querySelector('.close-btn');

	// 点击关闭按钮或遮罩层时隐藏弹框
	closeBtn.addEventListener('click', function() {
		overlay.style.display = 'none';
	});

	overlay.addEventListener('click', function(event) {
		if (event.target === overlay) {
			overlay.style.display = 'none';
		}
	});
&lt;/script&gt;
</code></pre>
</body>
</html>