弹窗代码示例 - 如何创建简单弹窗 - 常规

以下是一个简单的弹窗代码，内容为'hallo'：

<!DOCTYPE html>
<html>
<head>
	<title>弹窗示例</title>
	<style>
		.modal {
			display: none; /* 默认不显示 */
			position: fixed; /* 固定定位 */
			z-index: 1; /* 设置层级 */
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
		}
		.modal-content {
			background-color: #fefefe;
			margin: 15% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 80%;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>弹窗示例</h1>
	<button onclick="openModal()">弹窗</button> <!-- 点击按钮触发弹窗 -->
	<div id="myModal" class="modal">
		<div class="modal-content">
			<p>hallo</p> <!-- 弹窗内容 -->
			<button onclick="closeModal()">关闭</button> <!-- 关闭按钮 -->
		</div>
	</div>
	<script>
		var modal = document.getElementById("myModal"); // 获取弹窗
		function openModal() {
			modal.style.display = "block"; // 显示弹窗
		}
		function closeModal() {
			modal.style.display = "none"; // 隐藏弹窗
		}
	</script>
</body>
</html>

该代码使用 HTML、CSS 和 JavaScript 创建了一个简单的弹窗。

HTML 部分：定义了弹窗的结构，包括一个按钮用来触发弹窗，一个 div 用来包含弹窗内容，以及一些 CSS 类用来控制弹窗样式。
CSS 部分：定义了弹窗的样式，包括位置、大小、颜色、背景等。
JavaScript 部分：定义了两个函数，openModal() 用于显示弹窗，closeModal() 用于隐藏弹窗。

你可以根据自己的需要修改弹窗的内容、样式和功能。例如，你可以添加更多的按钮、输入框、图片等元素，或者修改弹窗的样式、位置、大小等。