如何创建 - 警报
了解如何使用 CSS 创建警报消息。
警报
警报消息可用于通知用户一些特殊情况:危险、成功、信息或警告。
×
Danger! Indicates a dangerous or potentially negative action.
×
Success! Indicates a successful or positive action.
×
Info! Indicates a neutral informative change or action.
×
Warning! Indicates a warning that might need attention.
创建警报消息
步骤 1) 添加 HTML:
实例
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div>
如果您希望能够关闭警报消息，请添加一个带有 onclick 属性的 <span> 元素，该属性显示"当您点击我时，隐藏我的父元素" ; - 这是容器 <div> (class="alert")。
提示:使用 HTML 实体 "×" 创建字母 "x"。
步骤 2) 添加 CSS:
设置警报框和关闭按钮的样式:
实例
/* 警告消息框 */
.alert {
padding: 20px;
background-color: #f44336; /* Red */
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 属性。
而且，如果您希望警报在单击它们时慢慢淡出，请添加 opacity 和 transition 到 alert 类:
实例
<style>
.alert {
opacity: 1;
transition: opacity 0.6s;
/* 600ms 淡出 */
}
</style>
<script>
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var
i;
// Loop through all close buttons
for (i = 0; i < close.length; i++) {
// 当有人点击关闭按钮时
close[i].onclick =
function(){
// Get the
parent of <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>
亲自试一试 »
提示: 另请查看 Notes。
