HTML 公告弹窗代码示例
在网页设计中,弹出式信息窗口（如公告、提示等）经常需要使用，HTML 提供了多种方法来创建这样的弹出框，以下是一些常见的实现方式。
使用 alert()
这是最简单直接的方法,但不推荐用于交互性较强的场景，因为它会立即关闭浏览器窗口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">Alert Example</title>
</head>
<body>
<button onclick="showAlert()">显示警告</button>
<script type="text/javascript">
function showAlert() {
alert("这是一个警告消息！");
}
</script>
</body>
</html>
使用 confirm()
confirm() 函数返回一个布尔值，表示用户是否确认执行操作，如果用户点击“确定”，则返回 true；否则返回 false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">Confirm Example</title>
</head>
<body>
<p>你确定要退出吗？</p>
<button onclick="return confirm('你确定要退出吗？')">确定</button>
<script type="text/javascript">
function confirm(message) {
return confirm(message);
}
</script>
</body>
</html>
使用 <dialog> 和 <summary>
这可以用来创建自定义的对话框,通过设置 <dialog> 的 aria-label 属性为“公告”或类似的描述。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">Dialog Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<h2 id="dialogTitle">公告</h2>
<dialog id="dialog" aria-hidden="true" role="dialog">
<summary id="dialogSummary">公告</summary>
<div id="dialogContent">这里是你想要展示的信息。</div>
</dialog>
<button onclick="showDialog()">打开公告</button>
<script type="text/javascript">
function showDialog() {
document.getElementById("dialog").open();
}
</script>
</body>
</html>
使用 JavaScript 创建自定义弹窗
这种方法允许开发者完全控制弹窗的内容和样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">Custom Popup Example</title>
<style>
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#closeButton {
cursor: pointer;
}
</style>
</head>
<body>
<button id="openPopupBtn">打开公告</button>
<div id="popup">
<button id="closePopupBtn">关闭公告</button>
<p>这是一个自定义公告。</p>
</div>
<script type="text/javascript">
const openPopup = () => {
document.getElementById("popup").style.display = "block";
};
const closePopup = () => {
document.getElementById("popup").style.display = "none";
};
document.getElementById("openPopupBtn").addEventListener("click", openPopup);
document.getElementById("closePopupBtn").addEventListener("click", closePopup);
</script>
</body>
</html>
这些示例展示了如何在网页中使用不同的方法来创建和管理弹出式信息窗口,根据具体需求选择合适的方法可以使您的网页更加丰富和用户友好。
上一篇