Bootstrap Alert Tự động đóng

Nhu cầu của tôi là gọi cảnh báo khi tôi nhấp vào nút Thêm vào danh sách mong muốn và sẽ biến mất cảnh báo trong 2 giây. Đây là cách tôi đã thử, nhưng cảnh báo sẽ biến mất ngay lập tức ngay khi nó xuất hiện. Không chắc chắn, lỗi ở đâu .. Có ai có thể giúp tôi không?

Tập lệnh JS

$(document).ready (function(){
   $("#success-alert").hide();
   $("#myWish").click(function showAlert() {
      $("#success-alert").alert();
      window.setTimeout(function () { 
         $("#success-alert").alert('close'); 
      }, 2000);             
   });      
});

Mã HTML:

<div class="product-options">
   <a id="myWish" href="" class="btn btn-mini">Add to Wishlist </a>
   <a href="#" class="btn btn-mini"> Purchase </a>
</div>

Hộp thông báo:

<div class="alert alert-success" id="success-alert">
   <button type="button" class="close" data-dismiss="alert">x</button>
   <strong>Success!</strong>
   Product have added to your wishlist.
</div>

Để có một slide mượt mà:

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").slideUp(500);
});

$(document).ready(function() {
  $("#success-alert").hide();
  $("#myWish").click(function showAlert() {
    $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
      $("#success-alert").slideUp(500);
    });
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="product-options">
  <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
  <a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
  <button type="button" class="close" data-dismiss="alert">x</button>
  <strong>Success! </strong> Product have added to your wishlist.
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Sử dụng một fadeTo() mờ đến 500 trong 2 giây trong mã "Tôi có thể có Kittenz" không thể đọc được đối với tôi. Tôi nghĩ sẽ tốt hơn khi sử dụng các tùy chọn khác như độ trễ ()

$(".alert").delay(4000).slideUp(200, function() {
    $(this).alert('close');
});

Tại sao tất cả các câu trả lời khác sử dụng slideUp chỉ là ngoài tôi. Vì tôi đang sử dụng fadevà incác lớp để cảnh báo biến mất khi đóng (hoặc sau khi hết thời gian), tôi không muốn nó "trượt lên" và xung đột với điều đó.

Bên cạnh đó slideUpphương pháp thậm chí còn không hiệu quả. Bản thân cảnh báo không hiển thị gì cả. Đây là những gì làm việc hoàn hảo cho tôi:

$(document).ready(function() {
    // show the alert
    setTimeout(function() {
        $(".alert").alert('close');
    }, 2000);
});

Tôi thấy đây là một giải pháp tốt hơn

$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert('close');
});

thêm một giải pháp cho việc này Tự động đóng hoặc làm mờ thông báo cảnh báo bootstrap sau 5 giây:

Đây là mã HTML được sử dụng để hiển thị thông báo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="alert alert-danger">
This is an example message...
</div>


<script type="text/javascript">

$(document).ready(function () {
 
window.setTimeout(function() {
    $(".alert").fadeTo(1000, 0).slideUp(1000, function(){
        $(this).remove(); 
    });
}, 5000);
 
});
</script>

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert('close');
});

Trong đó các tham số fadeTo là fadeTo (tốc độ, độ mờ)

Kích hoạt tự động và thủ công khi cần thiết

$(function () {
    TriggerAlertClose();
});

function TriggerAlertClose() {
    window.setTimeout(function () {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function () {
            $(this).remove();
        });
    }, 5000);
}

Đây là một cách tiếp cận tốt để hiển thị hoạt hình trong và ngoài bằng jQuery

  $(document).ready(function() {
      // show the alert
      $(".alert").first().hide().slideDown(500).delay(4000).slideUp(500, function () {
         $(this).remove(); 
      });
  });

Bộ điều khiển C #:

var result = await _roleManager.CreateAsync(identityRole);
   if (result.Succeeded == true)
       TempData["roleCreateAlert"] = "Added record successfully";

Trang cạo râu:

@if (TempData["roleCreateAlert"] != null)
{
    <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <p>@TempData["roleCreateAlert"]</p>
    </div>
}

Bất kỳ cảnh báo tự động đóng:

<script type="text/javascript">
    $(".alert").delay(5000).slideUp(200, function () {
        $(this).alert('close');
    });
</script>