Cách thực hiện - 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:
Ví 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 có khả năng đóng thông báo cảnh báo, hãy thêm phần tử <span> với thuộc tính onclick
có nội dung "khi bạn nhấp vào tôi, hãy ẩn phần tử cha của tôi" - đó là vùng chứa <div> (class="alert") .
Mẹo: Sử dụng thực thể HTML " ×
" để tạo chữ cái "x".
Bước 2) Thêm CSS:
Tạo kiểu cho hộp cảnh báo và nút đóng:
Ví 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;
}
Hãy tự mình thử »Nhiều cảnh báo
Nếu 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 mờ dần khi bạn nhấp vào chúng, hãy thêm opacity
và transition
sang lớp alert
:
Ví 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>
Hãy tự mình thử »Mẹo: Ngoài ra, hãy xem Ghi chú .