Bootstrap Alert Auto Close

154

Мне нужно вызвать оповещение, когда я нажимаю кнопку Добавить в список желаний, и оно должно исчезнуть через 2 секунды. Вот как я пытался, но предупреждение исчезает мгновенно, как только оно появляется. Не уверен, где ошибка .. Кто-нибудь может мне помочь?

JS Script

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

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>

Поле оповещения:

<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
источник
1
возможный дубликат stackoverflow.com/questions/16604407/… и stackoverflow.com/questions/7643308/…
4dgaurav
Я пытался эти потоки .. но не уверен, как реализовать. : /
srikanth_naalla

Ответы:

276

Для плавного скольжения:

$("#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
источник
3
Это не работает второй раз, когда вы нажали кнопку. Из-за предупреждения («закрыть»). Если вы используете slideUp (), он работает @ICanHasKittenz
Fatih Alp
Работает красиво, но что это за строка $ ("# success-alert"). Alert (); использование? Я удалил его и тоже работает.
Роберто Сепульведа Браво
1
@ RobertoSepúlvedaBravo - это придание функциональности окну оповещения, но вы правы, здесь это не нужно, потому что мы используем data-dimiss="alert" атрибут. Буду обновлять скрипт.
AyB
Не работал для меня. Однако другие приведенные ниже примеры работали нормально.
Терье Нестус
@TerjeNesthus Можете ли вы объяснить, что именно не сработало? Оповещение не скользит? Или это не работает во второй раз? Могу ли я узнать версию вашей начальной загрузки? Это было предназначено для Bootstrap 3, и я не проверял их в более поздних версиях.
AyB
56

Использование fadeTo(), которое исчезает до непрозрачности 500 через 2 секунды в коде "I Can Has Kittenz", мне не читается. Я думаю, что лучше использовать другие параметры, такие как задержка ()

$(".alert").delay(4000).slideUp(200, function() {
    $(this).alert('close');
});
Alex Fuentes
источник
42

Почему все остальные ответы используются slideUpпросто вне меня. Как я использую fadeи inклассы , чтобы иметь предупреждение угасать , когда закрыты (или после тайм - аута), я не хочу , чтобы «скользить» и конфликт с этим.

Кроме того, slideUpметод даже не работал. Само предупреждение не показывалось вообще. Вот что отлично сработало для меня:

$(document).ready(function() {
    // show the alert
    setTimeout(function() {
        $(".alert").alert('close');
    }, 2000);
});
ADTC
источник
1
Коротко и сладко
Наварадж
21

Я нашел это лучшее решение

$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert('close');
});
Jaimie
источник
11

еще одно решение для этого Автоматически закрывать или исчезать предупреждение о загрузке через 5 секунд:

Это HTML-код, используемый для отображения сообщения:

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

Дивьеш Канзария
источник
Это очень хороший ответ, потому что он не ограничивается отображением сообщения JS, сообщение может уже отображаться при загрузке страницы.
Гильермо Орамас Р.
1
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert('close');
});

Где параметры fadeTo - это fadeTo (скорость, непрозрачность)

Марва Абделаал
источник
1

Тигры автоматически и вручную при необходимости

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

function TriggerAlertClose() {
    window.setTimeout(function () {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function () {
            $(this).remove();
        });
    }, 5000);
}
Арун Прасад Е.С.
источник
0

Это хороший подход для отображения анимации с помощью jQuery

  $(document).ready(function() {
      // show the alert
      $(".alert").first().hide().slideDown(500).delay(4000).slideUp(500, function () {
         $(this).remove(); 
      });
  });
yehanny
источник
0

Контроллер C #:

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

Страница бритвы:

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

Любое оповещение Auto Close:

<script type="text/javascript">
    $(".alert").delay(5000).slideUp(200, function () {
        $(this).alert('close');
    });
</script>
Р.М. Шахидул Ислам Шахед
источник