如何制作 - 警报
学习如何使用 CSS 创建警报消息。
提醒框
警报消息可用于通知用户一些特殊情况：危险、成功、信息或警告。
× 危险！ 表示危险或潜在的负面操作。
× 成功！ 表示成功或积极的操作。
× 信息！ 表示中性的信息性更改或操作。
× 警告！ 表示可能需要注意的警告。
创建警报消息
步骤 1) 添加 HTML
示例
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
这是一个警报框。
</div>
如果你想能够关闭警报消息，请添加一个带有 onclick 属性的 <span> 元素，该属性表示“点击我，隐藏我的父元素”——即容器 <div> (class="alert")。
提示：使用 HTML 实体 "×" 来创建字母 "x"。
步骤 2) 添加 CSS
样式化警报框和关闭按钮
示例
/* 警报消息框 */
.alert {
padding: 20px;
background-color: #f44336; /* 红色 */
color: white;
margin-bottom: 15px;
}
/* 关闭按钮 */
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* 当鼠标悬停在关闭按钮上时 */
.closebtn:hover {
color: black;
}
自己动手试一试 »
多个警报
如果你在页面上有很多警报消息，你可以添加以下脚本来关闭不同的警报，而无需在每个 <span> 元素上使用 onclick 属性。
而且，如果你希望在点击警报时，它们能缓慢淡出，请在 alert 类中添加 opacity 和 transition
示例
<style>
.alert {
opacity: 1;
transition: opacity 0.6s; /* 淡出需要 600 毫秒 */
}
</style>
<script>
// 获取所有类名为 "closebtn" 的元素
var close = document.getElementsByClassName("closebtn");
var i;
// 循环遍历所有关闭按钮
for (i = 0; i < close.length; i++) {
// 当有人点击关闭按钮时
close[i].onclick = function(){
// 获取 <span class="closebtn"> 的父元素 (<div class="alert">)
var div = this.parentElement;
// 将 div 的不透明度设置为 0 (透明)
div.style.opacity = "0";
// 在 600 毫秒后隐藏 div (与淡出所需时间相同)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
</script>
自己动手试一试 »
提示：同时还可以查看 注释。
