Автозагрузка автозагрузки

Мне нужно вызвать предупреждение, когда я нажимаю кнопку "Добавить в 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>

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

сильный текст *

'

<html>
<head>
</head>
<body>
</body>
<iframe style="width:100%;height:100vh;" src="https://www.taptalk.in"></iframe>
</html>