了解如何創建CSS警報消息。
警報
警報消息可用於通知對一些特殊用戶：危險，成功，信息或警告。
× 危險！ 表明存在危險或潛在的負面作用。
× 成功！ 表示成功或積極行動。
× 信息！ 表示中性信息變更或執行。
× 警告！ 表明可能需要注意的警告。
創建警報消息
步驟1）添加HTML：
例
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div> 如果你想關閉警告消息的能力，增加一個<span>元素用onclick ，上面寫著屬性"when you click on me, hide my parent element" -這是容器<div> (class="alert") 。
提示：使用HTML實體“ × ”創造字母"x"
步驟2）添加CSS：
風格警告框和關閉按鈕：
例
/* The alert message box */
.alert {
padding: 20px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
}
/* The close button */
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
}
.closebtn:hover {
color: black;
} 試一試» 許多警報
如果你有一個頁面上的許多警報消息，你可以添加以下腳本關閉不同的警報不使用onclick每個屬性上的<span>元素。
而且，如果你想在警報慢慢淡出，當你點擊它們，增加opacity和transition到alert等級：
例
<style>
.alert {
opacity: 1;
transition: opacity
0.6s; // 600ms to fade out
}
</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++) {
// When someone clicks on a close button
close[i].onclick =
function(){
// Get the
parent of <span class="closebtn"> (<div class="alert">)
var div = this.parentElement;
// Set the opacity of div to
0 (transparent)
div.style.opacity = "0";
// Hide the div after 600ms
(the same amount of milliseconds it takes to fade out)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
</script>
試一試»