Bootstrap警告自动关闭

Question

Bootstrap警告自动关闭

209

我的需求是，在我点击“添加到愿望清单”按钮时调用alert，并在2秒后消失。这是我尝试的方法，但警报一出现就立即消失了。不确定有什么错误..有人可以帮帮我吗？

JS脚本

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

可能是https://dev59.com/IHLYa4cB1Zd3GeqPVDk7和https://dev59.com/xGsz5IYBdhLWcg3w0bOl的重复问题。 - 4dgaurav

13个回答

73

在“我可以拥有小猫咪”的代码中，使用 fadeTo() 以2秒钟的时间淡化到500的不透明度对我来说不易读懂。我认为最好使用其他选项，如 delay()。

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

- Alex Fuentes

72

为什么其他答案都使用 slideUp，我就不明白了。由于我在使用 fade 和 in 类来让警报框在关闭后（或超时后）淡出，我不希望它“向上滑动”并与其冲突。

此外，slideUp 方法甚至都没有起作用。警报框本身根本没有显示。这是对我完美起作用的方法：

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

- ADTC

8

短而简洁。 - Nawaraj

25

我发现这是一个更好的解决方案

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

- Jaimie

25

自动关闭或淡化bootstrap警告信息的另一种解决方案，只需在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显示消息，页面加载时该消息已经可以显示。

- Divyesh Kanzariya

1

这是一个非常好的答案，因为它不仅限于通过JS显示消息，而且消息可以在页面加载时就已经显示出来了。 - Guillermo Oramas R.

1

最佳答案：当警报消失时，内容会覆盖其位置。 - Maji Mazuri

13

我知道这个线程已经过时了，但是我想添加我的Bootstrap 5脚本，以防其他人需要。

<script>
    setTimeout(function() {
        bootstrap.Alert.getOrCreateInstance(document.querySelector(".alert")).close();
    }, 3000)
</script>

- lonny

4

HTML：

<div class="alert alert-info alert-dismissible fade show js-alert" role="alert">

Javascript:

  if (document.querySelector('.js-alert')) {
    document.querySelectorAll('.js-alert').forEach(function($el) {
      setTimeout(() => {
        $el.classList.remove('show');
      }, 2000);
    });
  }

- Gigoland

完美且易于操作的解决方案。适用于BS5！ - Woody

3

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

fadeTo()方法的参数为fadeTo(speed, opacity)

- Marwah Abdelaal

2

这是一种使用jQuery展示动画效果的好方法。

  $(document).ready(function() {
      // show the alert
      $(".alert").first().hide().slideDown(500).delay(4000).slideUp(500, function () {
         $(this).remove(); 
      });
  });

- yehanny

1

在需要时，Tiggers会自动或手动触发

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

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

- Arun Prasad E S

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AyB · Accepted Answer

实现平稳的上滑效果：

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