Automatyczne zamknięcie alertu Bootstrap

153

Muszę zadzwonić do powiadomienia, gdy kliknę przycisk Dodaj do listy życzeń i powinien zniknąć w ciągu 2 sekund. Tak próbowałem, ale alert znika natychmiast, gdy tylko się pojawi. Nie wiem, gdzie jest błąd… Czy ktoś może mi pomóc?

JS Script

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

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

Alert Box:

<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>
srikanth_naalla
źródło
Wypróbowałem te przepływy ... ale nie jestem pewien, jak zaimplementować. : /
srikanth_naalla

Odpowiedzi:

276

Aby uzyskać płynne przesuwanie:

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

AyB
źródło
3
Nie działa po drugim kliknięciu przycisku. Ze względu na alert ('close') Jeśli używasz slideUp (), działa @ICanHasKittenz
Fatih Alp
Działa pięknie, ale co to za linia $ ("# alert o sukcesie"). Alert (); stosowanie? Usunąłem go i też działa.
Roberto Sepúlveda Bravo
1
@ RobertoSepúlvedaBravo ma na celu nadanie funkcji zbliżenia do pola ostrzegawczego, ale masz rację, nie jest to potrzebne, ponieważ używamy data-dimiss="alert" atrybutu. Zaktualizuje skrypt.
AyB
Nie działa dla mnie. Jednak inne przykłady poniżej działały dobrze.
Terje Nesthus,
@TerjeNesthus Czy możesz wyjaśnić, co dokładnie nie zadziałało? Alert nie wysuwa się? Albo nie działa za drugim razem? Czy mogę poznać wersję twojego bootstrapa? To miało być przeznaczone dla Bootstrap 3 i nie testowałem ich w późniejszych wersjach.
AyB
56

Użycie elementu, fadeTo()który blaknie do krycia 500 w ciągu 2 sekund w kodzie „I Can Has Kittenz”, jest dla mnie nieczytelne. Myślę, że lepiej jest używać innych opcji, takich jak opóźnienie ()

$(".alert").delay(4000).slideUp(200, function() {
    $(this).alert('close');
});
Alex Fuentes
źródło
41

Dlaczego wszystkie inne odpowiedzi slideUpsą po prostu poza mną. Ponieważ używam klas fadei in, aby ostrzeżenie znikało po zamknięciu (lub po przekroczeniu limitu czasu), nie chcę, aby „ślizgał się” i powodował konflikt z tym.

Poza tym slideUpmetoda nawet nie zadziałała. Sam alert w ogóle się nie pojawił. Oto, co zadziałało idealnie dla mnie:

$(document).ready(function() {
    // show the alert
    setTimeout(function() {
        $(".alert").alert('close');
    }, 2000);
});
ADTC
źródło
1
Krótko i słodko
Nawaraj
21

Uważam, że to lepsze rozwiązanie

$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert('close');
});
Jaimie
źródło
11

jeszcze jedno rozwiązanie tego problemu Automatycznie zamknij lub zniknij komunikat ostrzegawczy ładowania początkowego po 5 sekundach:

Oto kod HTML używany do wyświetlania wiadomości:

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

Divyesh Kanzariya
źródło
To bardzo fajna odpowiedź, ponieważ nie ogranicza się do pokazania wiadomości tru JS, wiadomość może być już wyświetlana po załadowaniu strony.
Guillermo Oramas R.
1
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert('close');
});

Gdzie parametry fadeTo to fadeTo (prędkość, krycie)

Marwah Abdelaal
źródło
1

Tygrysy automatycznie i ręcznie w razie potrzeby

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

function TriggerAlertClose() {
    window.setTimeout(function () {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function () {
            $(this).remove();
        });
    }, 5000);
}
Arun Prasad ES
źródło
0

Jest to dobre podejście do wyświetlania i wyświetlania animacji przy użyciu jQuery

  $(document).ready(function() {
      // show the alert
      $(".alert").first().hide().slideDown(500).delay(4000).slideUp(500, function () {
         $(this).remove(); 
      });
  });
yehanny
źródło
0

Kontroler C #:

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

Strona Razor:

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

Automatyczne zamknięcie dowolnego alertu:

<script type="text/javascript">
    $(".alert").delay(5000).slideUp(200, function () {
        $(this).alert('close');
    });
</script>
RM Shahidul Islam Shahed
źródło