Cách tạo: Thông báo cảnh báo

Học cách sử dụng CSS để tạo thông báo cảnh báo.

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ề một số vấn đề đặc biệt: nguy hiểm, thành công, thông tin hoặc cảnh báo.

× Nguy hiểm！biểu thị hành động nguy hiểm hoặc có thể gây tác động tiêu cực.
× Thành công！biểu thị thành công hoặc hành động tích cực.
× Thông tin！biểu thị thông tin trung tính hoặc thay đổi操作.
× Cảnh báo！biểu thị cảnh báo cần chú ý.

Thử ngay

Tạo thông báo cảnh báo

Bước 1 - Thêm HTML：

<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ó thể đóng thông báo cảnh báo, hãy thêm một onclick thuộc tính <span> thuộc tính, biểu thị khi bạn nhấp vào tôi, ẩn phần tử cha của tôi <div class="alert">。

Lưu ý：Sử dụng mã HTML "×" để tạo chữ cái "x".

Bước 2 - Thêm CSS：

Đặt樣式 cho cửa sổ cảnh báo và nút đóng:

/* Cửa sổ cảnh báo */
.alert {
  padding: 20px;
  background-color: #f44336; /* Đỏ */
  color: white;
  margin-bottom: 15px;
}
/* Nút đóng */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
/* Khi con trỏ chuột di chuyển đến nút đóng */
.closebtn:hover {
  color: black;
}

Thử ngay

cảnh báo nhiều

Nếu có nhiều cảnh báo thông báo trên trang, bạn có thể thêm đoạn mã sau để không cần sử dụng mỗi <span> của phần tử onclick trạng thái khi đóng các cảnh báo khác.

Và nếu bạn muốn chúng mờ dần khi nhấp vào cảnh báo, hãy thêm độ trong suốt và chuyển đổi vào alert Trong lớp:

Mô hình

<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* Mờ dần trong 600 giây */
}
</style>
<script>
// Lấy tất cả các phần tử có class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;
// Lặp qua tất cả các nút đóng Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // Lặp qua tất cả các nút đóng
  close[i].onclick = function(){
    // Lấy phần tử cha của <span class="closebtn"> (div class="alert");
    var div = this.parentElement;
    // Đặt độ trong suốt của div là 0 (mờ)
    div.style.opacity = "0";
    // 600 giây sau khi ẩn div (ngay cả khi mờ dần cần thời gian)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

Thử ngay

Trang liên quan

Hướng dẫn:Cách tạo thẻ nhớ