以下是一个简单的弹窗代码,内容为“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>
写出弹窗代码 内容hallo

原文地址: https://www.cveoy.top/t/topic/HmU 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录