Bootstrap Alert Auto Close

Question

Bootstrap Alert Auto Close

82

Мне нужно вызвать предупреждение, когда я нажимаю кнопку "Добавить в Wishlist" и должен исчезнуть оповещение через 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 16 апр. 2014, в 08:12

Источник

1

возможный дубликат stackoverflow.com/questions/16604407/… и stackoverflow.com/questions/7643308/…
4dgaurav 16 апр. 2014, в 06:49
0

Я пытался эти потоки .. но не уверен, как реализовать. : /
srikanth_naalla 16 апр. 2014, в 07:18

Теги:

javascript

twitter-bootstrap

html

alert

6 ответов

36

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

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

Alex Fuentes 15 авг. 2014, в 00:39

13

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

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

Jaimie 14 июнь 2015, в 22:20

11

Почему все остальные ответы используют slideUp, просто выше меня. Поскольку я использую классы fade и in, чтобы оповещение исчезало при закрытии (или после таймаута), я не хочу, чтобы он "скользил" и противоречил этому.

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

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

ADTC 12 июль 2015, в 15:36

1

Коротко и сладко
Nawaraj 20 янв. 2019, в 16:20

4

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

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

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

JS Snippet

<script type="text/javascript">

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

Divyesh Kanzariya 17 сен. 2015, в 14:16

0

Это очень хороший ответ, потому что он не ограничивается отображением сообщения JS, сообщение может уже отображаться при загрузке страницы.
Guillermo Oramas R. 26 март 2018, в 12:27
0

да :) потому что я написал это в $(document).ready
Divyesh Kanzariya 26 март 2018, в 12:38

1

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

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

Marwah Abdelaal 28 апр. 2016, в 20:03

Ещё вопросы

возможный дубликат stackoverflow.com/questions/16604407/… и stackoverflow.com/questions/7643308/…
Я пытался эти потоки .. но не уверен, как реализовать. : /
Это очень хороший ответ, потому что он не ограничивается отображением сообщения JS, сообщение может уже отображаться при загрузке страницы.
да :) потому что я написал это в $(document).ready

I Can Has Kittenz · Accepted Answer · 2014-04-16T08-29-00.000Z

182

Лучший ответ

Для гладкого слайда:

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

Fiddle

I Can Has Kittenz 16 апр. 2014, в 08:29

3

Это не работает второй раз, когда вы нажали кнопку. Из-за предупреждения ('close') Если вы используете slideUp (), он работает @ICanHasKittenz
Fatih Alp 02 авг. 2016, в 19:32
0

Работает красиво, но что это за строка $ ("# success-alert"). Alert (); использование? Я удалил его и тоже работает.
Roberto Sepúlveda Bravo 17 июнь 2017, в 05:34
1

@ RobertoSepúlvedaBravo, чтобы придать функциональность окну оповещения близким функциям, но вы правы, здесь это не нужно, потому что мы используем data-dimiss="alert" . Буду обновлять скрипт.
I Can Has Kittenz 18 июнь 2017, в 05:10
0

Не работал для меня. Однако другие приведенные ниже примеры работали нормально.
Terje Nesthus 21 сен. 2017, в 03:54
0

@TerjeNesthus Можете ли вы объяснить, что именно не сработало? Оповещение не скользит? Или это не работает во второй раз? Могу я узнать версию вашего бутстрапа? Это было предназначено для Bootstrap 3, и я не проверял их в более поздних версиях.
I Can Has Kittenz 24 сен. 2017, в 07:45
0

Почему внутри обратного вызова снова есть slideUp? Это работает от меня следующим образом: $ ('. Alert-success'). FadeTo (2000, 500) .slideUp (1000);
Darius.V 05 янв. 2018, в 18:43
0

Что хорошо в этом решении, так это то, что вы можете установить класс вашего оповещения на .hidden затем удалить этот класс, прежде чем вызывать .fadeTo() а затем функцию .slideUp() которая позаботится обо всем остальном. Благодарю.
DazBaldwin 12 апр. 2018, в 08:14

Показать ещё 5 комментариев