CÁCH THỨC - Cảnh báo
Tìm hiểu cách tạo thông báo cảnh báo bằng CSS.
Cảnh báo
Thông báo cảnh báo có thể được sử dụng để thông báo cho người dùng về điều gì đó đặc biệt: nguy hiểm, thành công, thông tin hoặc cảnh báo.
Tạo thông báo cảnh báo
Bước 1) Thêm HTML:
Thí dụ
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div>
Nếu bạn muốn khả năng đóng thông báo cảnh báo, hãy thêm phần tử <span> có onclick
thuộc tính cho biết "khi bạn nhấp vào tôi, hãy ẩn phần tử mẹ của tôi" - chính là vùng chứa <div> (class = "alert").
Mẹo: Sử dụng thực thể HTML " ×
" để tạo ký tự "x".
Bước 2) Thêm CSS:
Tạo kiểu cho hộp cảnh báo và nút đóng:
Thí dụ
/* 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;
transition: 0.3s;
}
/* When
moving the mouse over the close button */
.closebtn:hover {
color: black;
}
Nhiều cảnh báo
Nếu bạn có nhiều thông báo cảnh báo trên một trang, bạn có thể thêm tập lệnh sau để đóng các cảnh báo khác nhau mà không cần sử dụng thuộc tính onclick trên mỗi phần tử <span>.
Và, nếu bạn muốn các cảnh báo dần mờ đi khi bạn nhấp vào chúng, hãy thêm opacity
và transition
vào alert
lớp:
Thí dụ
<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>
Mẹo: Cũng xem Ghi chú .