如何製作 - 警報
學習如何使用 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>
自己動手試一試 »
提示：同時還可以檢視 註釋。
