写出弹窗代码 内容hallo
以下是一个简单的弹窗代码,内容为“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>
原文地址: https://www.cveoy.top/t/topic/HmU 著作权归作者所有。请勿转载和采集!