Cửa sổ cảnh báo xóa JavaScript

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.

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.

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.

  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

________số 8_______

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

  
    
  
  
    
  
  
    
  



  
  

    An example alert with an icon
  


  
  

    An example success alert with an icon
  


  
  

    An example warning alert with an icon
  


  
  

    An example danger alert with an icon
  

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ả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 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.

  
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.

  
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.

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.

@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.

// 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 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.

  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.

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.

Đ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ử hậu duệ 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.

Làm cách nào để xóa thông báo cảnh báo trong JavaScript?

Làm cách nào để ẩn cảnh báo trong JavaScript?