引导警报自动关闭答案

【问题标题】：Bootstrap Alert Auto Close引导警报自动关闭
【发布时间】：2014-05-30 21:13:54
【问题描述】：

我需要在单击“添加到愿望清单”按钮时调用警报，并且应该在 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>

【问题讨论】：

stackoverflow.com/questions/16604407/… 和 stackoverflow.com/questions/7643308/… 的可能重复项

标签： javascript html twitter-bootstrap alert

【解决方案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>

【讨论】：

您第二次单击该按钮时无法正常工作。因为 alert('close') 如果你使用 slideUp() 它正在工作@ICanHasKittenz
效果很好，但这行是什么 $("#success-alert").alert();用法？我已将其删除并且也可以使用。
@RobertoSepúlvedaBravo 是为警报框提供关闭功能，但你是对的，这里不需要它，因为我们使用的是 data-dimiss="alert" 属性。将更新脚本。
对我不起作用。但是，下面的其他示例运行良好。
@TerjeNesthus 你能解释一下到底是什么不起作用吗？警报没有向上滑动？还是第二次不行？我可以知道你的引导程序的版本吗？这是为 Bootstrap 3 设计的，我没有在更高版本上测试它们。

【解决方案2】：

在“I Can Has Kittenz”的代码中使用 fadeTo() 在 2 秒内褪色到 500 的不透明度对我来说是不可读的。我认为使用延迟（）等其他选项会更好

$(".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 代码：

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

【讨论】：

这是一个非常好的答案，因为它不仅限于显示消息 tru JS，页面加载时可能已经显示消息。

【解决方案6】：

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

其中fadeTo参数为fadeTo(speed, opacity)

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

需要时自动和手动触发

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

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

【讨论】：

【解决方案9】：

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>

【讨论】：

【解决方案10】：

即使您多次单击该按钮，它也能完美运行。这里我创建了一个onClick函数来触发closeAlert函数。

function closeAlert(){
    const alert = document.getElementById('myalert')
    alert.style.display = "block"

    setTimeout(function(){ 
        alert.style.display = "none"

    }, 3000);

 }

【讨论】：