Cảnh báo tự động đóng trong javascript

Cảnh báo được tạo với lớp .alert, tiếp theo là một trong bốn lớp theo ngữ cảnh .alert-success, .alert-info, .alert-warning hoặc .alert-danger

Ví dụ

Thành công. Biểu thị một hành động thành công hoặc tích cực

Thông tin. Biểu thị một thay đổi hoặc hành động mang tính thông tin trung lập

Cảnh báo. Cho biết một cảnh báo có thể cần chú ý

Sự nguy hiểm. Biểu thị một hành động nguy hiểm hoặc có khả năng tiêu cực

Tự mình thử »

---

---

Liên kết cảnh báo

Thêm lớp alert-link vào bất kỳ liên kết nào bên trong hộp cảnh báo để tạo "liên kết có màu phù hợp"

Ví dụ

Thành công. Bạn nên

Tự mình thử »

---

Cảnh báo đóng cửa

Nhấp vào biểu tượng "x" ở bên phải để đóng tôi

Để đóng thông báo cảnh báo, hãy thêm lớp .alert-dismissible vào vùng chứa cảnh báo. Sau đó, thêm class="close" và data-dismiss="alert" vào một liên kết hoặc phần tử nút (khi bạn nhấp vào hộp cảnh báo này sẽ biến mất)

Ví dụ

 
Thành công. Biểu thị một hành động thành công hoặc tích cực

Tự mình thử »

Thuộc tính aria-* và giải thích ×

Để giúp cải thiện khả năng truy cập cho những người sử dụng trình đọc màn hình, bạn nên bao gồm thuộc tính aria-label="close" khi tạo nút đóng

× (×) là một thực thể HTML là biểu tượng ưu tiên cho các nút đóng, thay vì chữ "x"
Để biết danh sách tất cả các Thực thể HTML, hãy truy cập Tài liệu tham khảo về Thực thể HTML của chúng tôi

---

Cảnh báo động

Nhấp vào biểu tượng "x" ở bên phải để đóng tôi. Tôi sẽ "phai" ra

Các lớp .alert0 và .alert1 thêm hiệu ứng mờ dần khi đóng thông báo cảnh báo

---

Kiểm tra bản thân với các bài tập

Bài tập

Thêm một lớp Bootstrap "alert" để hiển thị kết quả của một hành động thành công

  Success!

Cung cấp câu trả lời "

bắt đầu bài tập

---

Toàn bộ tài liệu tham khảo cảnh báo Bootstrap

Để có tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện cảnh báo, hãy truy cập Tham khảo cảnh báo Bootstrap JS của chúng tôi

Cảnh báo có sẵn cho bất kỳ độ dài văn bản nào, cũng như nút đóng tùy chọn. Để tạo kiểu phù hợp, hãy sử dụng một trong tám lớp ngữ cảnh bắt buộc (e. g. ,

  A simple primary alert with an example link. Give it a click if you like.


  A simple secondary alert with an example link. Give it a click if you like.


  A simple success alert with an example link. Give it a click if you like.


  A simple danger alert with an example link. Give it a click if you like.


  A simple warning alert with an example link. Give it a click if you like.


  A simple info alert with an example link. Give it a click if you like.


  A simple light alert with an example link. Give it a click if you like.


  A simple dark alert with an example link. Give it a click if you like.

4). Để loại bỏ nội tuyến, hãy sử dụng

Cảnh báo chính đơn giản—hãy kiểm tra

Một cảnh báo phụ đơn giản—hãy kiểm tra

Một cảnh báo thành công đơn giản—hãy kiểm tra

Cảnh báo nguy hiểm đơn giản—hãy kiểm tra

Cảnh báo cảnh báo đơn giản—hãy kiểm tra

Cảnh báo thông tin đơn giản—hãy kiểm tra

Một cảnh báo ánh sáng đơn giản—hãy kiểm tra

Cảnh báo tối đơn giản—hãy kiểm tra

  A simple primary alert—check it out!


  A simple secondary alert—check it out!


  A simple success alert—check it out!


  A simple danger alert—check it out!


  A simple warning alert—check it out!


  A simple info alert—check it out!





A simple light alert—check it out!


A simple dark alert—check it out!

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung (e. g. văn bản hiển thị), hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp

  A simple primary alert with an example link. Give it a click if you like.


  A simple secondary alert with an example link. Give it a click if you like.


  A simple success alert with an example link. Give it a click if you like.


  A simple danger alert with an example link. Give it a click if you like.


  A simple warning alert with an example link. Give it a click if you like.


  A simple info alert with an example link. Give it a click if you like.


  A simple light alert with an example link. Give it a click if you like.


  A simple dark alert with an example link. Give it a click if you like.

5

Màu sắc liên kết

Sử dụng lớp tiện ích

  A simple primary alert with an example link. Give it a click if you like.


  A simple secondary alert with an example link. Give it a click if you like.


  A simple success alert with an example link. Give it a click if you like.


  A simple danger alert with an example link. Give it a click if you like.


  A simple warning alert with an example link. Give it a click if you like.


  A simple info alert with an example link. Give it a click if you like.


  A simple light alert with an example link. Give it a click if you like.


  A simple dark alert with an example link. Give it a click if you like.

6 để nhanh chóng cung cấp các liên kết có màu phù hợp trong bất kỳ cảnh báo nào

  A simple primary alert with an example link. Give it a click if you like.


  A simple secondary alert with an example link. Give it a click if you like.


  A simple success alert with an example link. Give it a click if you like.


  A simple danger alert with an example link. Give it a click if you like.


  A simple warning alert with an example link. Give it a click if you like.


  A simple info alert with an example link. Give it a click if you like.


  A simple light alert with an example link. Give it a click if you like.


  A simple dark alert with an example link. Give it a click if you like.

Nội dung bổ sung

Cảnh báo cũng có thể chứa các phần tử HTML bổ sung như tiêu đề, đoạn văn và dấu phân cách

Làm tốt

Aww yeah, bạn đã đọc thành công thông báo cảnh báo quan trọng này. Văn bản ví dụ này sẽ chạy lâu hơn một chút để bạn có thể thấy khoảng cách trong cảnh báo hoạt động như thế nào với loại nội dung này

---

Bất cứ khi nào bạn cần, hãy nhớ sử dụng các tiện ích ký quỹ để giữ mọi thứ gọn gàng và ngăn nắp

  
Well done!
  
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
  

  
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Biểu tượng

Tương tự, bạn có thể sử dụng tiện ích flexbox và Biểu tượng Bootstrap để tạo cảnh báo bằng biểu tượng. Tùy thuộc vào biểu tượng và nội dung của bạn, bạn có thể muốn thêm nhiều tiện ích hoặc kiểu tùy chỉnh

Một ví dụ cảnh báo với một biểu tượng

  
    
  
  

    An example alert with an icon
  

Cần nhiều hơn một biểu tượng cho cảnh báo của bạn?

Một ví dụ cảnh báo với một biểu tượng

Một cảnh báo thành công ví dụ với một biểu tượng

Một ví dụ cảnh báo cảnh báo với một biểu tượng

Một ví dụ về cảnh báo nguy hiểm với một biểu tượng

________số 8_______

sa thải

Sử dụng plugin JavaScript cảnh báo, có thể loại bỏ mọi cảnh báo nội tuyến. Đây là cách

• Hãy chắc chắn rằng bạn đã tải plugin cảnh báo hoặc JavaScript Bootstrap đã biên dịch
• Thêm một nút đóng và lớp

  
    A simple primary alert with an example link. Give it a click if you like.
  
  
    A simple secondary alert with an example link. Give it a click if you like.
  
  
    A simple success alert with an example link. Give it a click if you like.
  
  
    A simple danger alert with an example link. Give it a click if you like.
  
  
    A simple warning alert with an example link. Give it a click if you like.
  
  
    A simple info alert with an example link. Give it a click if you like.
  
  
    A simple light alert with an example link. Give it a click if you like.
  
  
    A simple dark alert with an example link. Give it a click if you like.
  

  7, bổ sung thêm phần đệm ở bên phải của cảnh báo và định vị nút đóng
• Trên nút đóng, hãy thêm thuộc tính

  
    A simple primary alert with an example link. Give it a click if you like.
  
  
    A simple secondary alert with an example link. Give it a click if you like.
  
  
    A simple success alert with an example link. Give it a click if you like.
  
  
    A simple danger alert with an example link. Give it a click if you like.
  
  
    A simple warning alert with an example link. Give it a click if you like.
  
  
    A simple info alert with an example link. Give it a click if you like.
  
  
    A simple light alert with an example link. Give it a click if you like.
  
  
    A simple dark alert with an example link. Give it a click if you like.
  

  8 để kích hoạt chức năng JavaScript. Đảm bảo sử dụng phần tử với nó để có hành vi phù hợp trên tất cả các thiết bị
• Để tạo hiệu ứng động cho các cảnh báo khi loại bỏ chúng, hãy đảm bảo thêm các lớp

  
    A simple primary alert with an example link. Give it a click if you like.
  
  
    A simple secondary alert with an example link. Give it a click if you like.
  
  
    A simple success alert with an example link. Give it a click if you like.
  
  
    A simple danger alert with an example link. Give it a click if you like.
  
  
    A simple warning alert with an example link. Give it a click if you like.
  
  
    A simple info alert with an example link. Give it a click if you like.
  
  
    A simple light alert with an example link. Give it a click if you like.
  
  
    A simple dark alert with an example link. Give it a click if you like.
  

  9 và

  
    
  Well done!
    
  Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
    
  
    
  Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
  

  0

Bạn có thể thấy điều này đang hoạt động với một bản demo trực tiếp

Guacamole thánh. Bạn nên kiểm tra một số lĩnh vực dưới đây

  Holy guacamole! You should check in on some of those fields below.
  

Khi cảnh báo bị loại bỏ, phần tử sẽ bị xóa hoàn toàn khỏi cấu trúc trang. Nếu người dùng bàn phím loại bỏ cảnh báo bằng nút đóng, tiêu điểm của họ sẽ đột ngột bị mất và tùy thuộc vào trình duyệt, được đặt lại về đầu trang/tài liệu. Vì lý do này, chúng tôi khuyên bạn nên bao gồm JavaScript bổ sung lắng nghe sự kiện

  
Well done!
  
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
  

  
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

1 và đặt

  
Well done!
  
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
  

  
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

2 theo chương trình vào vị trí thích hợp nhất trong trang. Nếu bạn định di chuyển tiêu điểm đến một phần tử không tương tác thường không nhận được tiêu điểm, hãy đảm bảo thêm

  
Well done!
  
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.




  

  
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

3 vào phần tử đó

ngổ ngáo

Biến

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

hỗn hợp biến thể

Được sử dụng kết hợp với

  
Well done!
  
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
  

  
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

4 để tạo các lớp sửa đổi theo ngữ cảnh cho các cảnh báo của chúng tôi

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Vòng

Vòng lặp tạo các lớp sửa đổi với mixin

  
Well done!
  
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
  

  
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

5

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

hành vi JavaScript

Gây nên

Cho phép loại bỏ cảnh báo qua JavaScript

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

Hoặc với các thuộc tính

  
Well done!
  
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
  

  
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

6 trên một nút trong cảnh báo, như minh họa ở trên

  A simple primary alert with an example link. Give it a click if you like.


  A simple secondary alert with an example link. Give it a click if you like.


  A simple success alert with an example link. Give it a click if you like.


  A simple danger alert with an example link. Give it a click if you like.


  A simple warning alert with an example link. Give it a click if you like.


  A simple info alert with an example link. Give it a click if you like.


  A simple light alert with an example link. Give it a click if you like.


  A simple dark alert with an example link. Give it a click if you like.

0

Lưu ý rằng việc đóng cảnh báo sẽ xóa cảnh báo đó khỏi DOM

phương pháp

Ví dụ, bạn có thể tạo một thể hiện cảnh báo bằng hàm tạo cảnh báo

  A simple primary alert with an example link. Give it a click if you like.


  A simple secondary alert with an example link. Give it a click if you like.


  A simple success alert with an example link. Give it a click if you like.


  A simple danger alert with an example link. Give it a click if you like.


  A simple warning alert with an example link. Give it a click if you like.


  A simple info alert with an example link. Give it a click if you like.


  A simple light alert with an example link. Give it a click if you like.


  A simple dark alert with an example link. Give it a click if you like.

1

Điều này làm cho một cảnh báo lắng nghe các sự kiện nhấp chuột trên các phần tử con cháu có thuộc tính

  A simple primary alert with an example link. Give it a click if you like.


  A simple secondary alert with an example link. Give it a click if you like.


  A simple success alert with an example link. Give it a click if you like.


  A simple danger alert with an example link. Give it a click if you like.


  A simple warning alert with an example link. Give it a click if you like.


  A simple info alert with an example link. Give it a click if you like.


  A simple light alert with an example link. Give it a click if you like.


  A simple dark alert with an example link. Give it a click if you like.

8. (Không cần thiết khi sử dụng tính năng khởi tạo tự động của data-api. )

Làm cách nào để tự động đóng cảnh báo trong JavaScript?

Làm cách nào để tự động đóng cảnh báo bootstrap trong JavaScript?

Cảnh báo JavaScript có dừng thực thi không?

Cảnh báo cửa sổ () trong JavaScript là gì?