Оповещение не работает во второй раз при нажатии на кнопку - PullRequest
Новая
       27

Оповещение не работает во второй раз при нажатии на кнопку

0 голосов
/ 18 мая 2018

Я использую версию начальной загрузки, поэтому я создал скользящее меню, аналогичное приведенному ниже.

кнопка не работает второй раз 

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

Проблема в том, что когда я нажимаю кнопку закрытия на слайде вниз, панель закрывается вверх.

Но когда я снова нажимаю добавить список пожеланий слайд вниз больше не появляется.

Моя проблема не только в закрытии.Он должен закрываться, когда я нажимаю на кнопку «х», если нет, он должен закрываться автоматически через определенное время.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

Вместо написания всего кода. Я использовал slideUp() dealy() и slideDown() методы Jquery. 

$(document).ready(function() {
  $("#success-alert").hide();
  $("#btn2").click(function showAlert() {
    $("#success-alert").slideDown(300).delay(2000).slideUp(400);
  });
});

$('#success-alert .close').click(function() {
  $(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-options">
  <input type="button" id="btn2" value="Add to wish list" />
</div>
<div class="alert alert-success" id="success-alert">
  <button type="button" class="close" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
  <strong>Success! </strong> Product have added to your wishlist.
</div>
0 голосов
/ 18 мая 2018

Удалите это из кнопки закрытия 'data-dismiss = "alert"' и добавьте еще одну функцию щелчка, как показано ниже: 

$(document).ready (function(){
    $("#success-alert").hide();
    $("#myWish").click(function showAlert() {
        $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
            $("#success-alert").slideUp(500);
        });   
    });

    $('#success-alert .close').click(function(){
        $(this).parent().hide();
    });
});

HTML будет выглядеть так: 

<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">x</button>
    <strong>Success! </strong>
    Product have added to your wishlist.
</div>
...