引导警报自动关闭

为了平滑向上滑动：-

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

在"I Can Have Kittenz"的代码中使用在 2 秒内淡入 500 不透明度的fadeTo()对我来说是不可读的。我认为最好使用其他选项，例如 delay((

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

为什么所有其他答案都使用slideUp我无法理解。由于我使用 fade 和 in 类使警报在关闭时(或超时后(消失，因此我不希望它"向上滑动"并与之冲突。

除此之外，slideUp方法甚至不起作用。警报本身根本没有显示。以下是对我完美有效的方法：

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

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

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

解决方案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 显示消息，消息在页面加载时可能已经显示。

这个线程很旧，但我只是想我会为 Bootstrap 5 添加我的脚本，以防其他人需要它

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

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);
    });
  }

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

参数为淡入淡出(速度、不透明度(

这是使用 jQuery 显示动画进出的好方法

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

需要时自动和手动跳跳虎

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

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

任何警报自动关闭：

<script type="text/javascript">
    $(".alert").delay(5000).slideUp(200, function () {
        $(this).alert('close');
    });
</script>

多次单击该按钮，这也非常有效。在这里，我创建了一个onClick函数来触发closeAlert函数。

function closeAlert(){
    const alert = document.getElementById('myalert')
    alert.style.display = "block"
    setTimeout(function(){ 
        alert.style.display = "none"
    }, 3000);
 }

基于@Ionny答案，我在 Bootstrap 5 中使用它来消除几条警报消息(验证错误(。我正在使用CSS类alert-flash仅针对某些警报块。

/**
 * Auto hide the flash alerts after a few seconds
 */
setTimeout(function() {
    var alertList = document.querySelectorAll('.alert-flash');
    alertList.forEach(function (alertNode) {
        bootstrap.Alert.getOrCreateInstance(alertNode).close(); 
    })
}, 3000)