Bootstrap Uyarısı Otomatik Kapat

İhtiyacım, İstek Listesine Ekle düğmesine tıkladığımda uyarıyı çağırmak ve uyarıyı 2 saniye içinde ortadan kaldırmak gerekiyor. Ben böyle denedim, ama uyarı ortaya çıkar çıkmaz anında kayboluyor. Emin değilim, böcek nerede .. Herkes bana yardım edebilir mi?

JS Komut Dosyası

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

HTML Kodu:

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

Uyarı Kutusu:

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

Düzgün bir slayt için:

$("#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>

Bir kullanarak fadeTo()kod 'ın "Can Kittenz Has" 2 saniyede 500 bir donukluk için solma olduğunu bana okunamıyor. Gecikme () gibi diğer seçenekleri kullanmanın daha iyi olduğunu düşünüyorum

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

Neden diğer tüm cevapların kullanımı slideUpbeni aşıyor. Uyarıyı kapatıldığında (veya zaman aşımından sonra) kaybolmak için fadeve insınıflarını kullandığım için, "yukarı kaymasını" ve bununla çakışmasını istemiyorum.

Ayrıca slideUpyöntem işe yaramadı bile. Uyarının kendisi hiç göstermedi. İşte benim için mükemmel olan şey:

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

Bunu daha iyi bir çözüm olarak buldum

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

bunun için bir çözüm daha 5 saniye sonra bootstrap uyarı mesajını otomatik olarak kapatır veya kaybolur:

Bu mesajı görüntülemek için kullanılan HTML kodudur:

<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');
});

FadeTo parametreleri nerede fadeTo (hız, opaklık)

Kaplanlar gerektiğinde otomatik ve manuel

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

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

Bu, jQuery kullanarak animasyonu içeri ve dışarı göstermek için iyi bir yaklaşımdır

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

C # Denetleyici:

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

Ustura Sayfası:

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

Herhangi Bir Uyarı Otomatik Kapat:

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