网页提示弹窗代码示例 - 简单易懂的实现方式 - 常规

以下是一个简单的网页提示弹窗实现代码的例子：

<!DOCTYPE html>
<html>
<head>
	<title>网页提示弹窗</title>
	<meta charset="utf-8">
	<style>
		.popup {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 20px;
			background-color: #fff;
			border: 1px solid #ccc;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			z-index: 9999;
		}
		.popup h2 {
			margin-top: 0;
		}
		.popup p {
			margin-bottom: 0;
		}
		.popup button {
			margin-top: 20px;
			padding: 10px 20px;
			background-color: #007bff;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<button onclick='showPopup()'>显示弹窗</button>

	<div id='popup' class='popup' style='display: none;'>
		<h2>提示信息</h2>
		<p>这是一个网页提示弹窗。</p>
		<button onclick='hidePopup()'>关闭</button>
	</div>

	<script>
		function showPopup() {
			document.getElementById('popup').style.display = 'block';
		}

		function hidePopup() {
			document.getElementById('popup').style.display = 'none';
		}
	</script>
</body>
</html>

这个例子中，我们使用了一个按钮来触发显示弹窗的操作。弹窗本身是一个带有提示信息和关闭按钮的 div 元素，使用 CSS 样式来设置弹窗的样式。在 JavaScript 中，我们定义了两个函数来控制弹窗的显示和隐藏，分别是 showPopup 和 hidePopup。这些函数通过修改弹窗的 CSS 样式来实现弹窗的显示和隐藏。