无法设置Bootstrap警报关闭时间

I'm trying to hide alert with the following script example, but none of them workes and I can't set time whenever the alert to close after it's displayed. I'm stuck at this. Please, tell me, where my mistake is.

我正在尝试使用以下脚本示例隐藏警报,但它们都不起作用,并且每当警报在显示后关闭时我都无法设置时间。我坚持这个。请告诉我,我的错误在哪里。

Example 1:

window.setTimeout(function() { 
     $(".alert-notification").alert('close'); 
}, 8000);

Example 2:

$(".alert-notification").delay(8000).slideUp(200, function(){
    $(".alert-notification").alert('close');
});

Both example are working and closing the alert but not in the specific time. I call this functions in jQuery document.ready Thanks!

这两个示例都在工作并关闭警报,但不是在特定时间。我在jQuery document.ready中调用了这个函数。谢谢!

2 个解决方案

#1

You should actually call them when you are displaying the alert, not during the $(document).ready() function.

您应该在显示警报时实际调用它们,而不是在$(document).ready()函数期间调用它们。

Snippet:

$(function () {
  $(".alert").hide().removeClass("hidden");
  $("#callAlert").click(function () {
    $(".alert").slideDown(function () {
      setTimeout(function () {
        $(".alert").slideUp();
      }, 5000);
    });
  });
});

* {font-family: 'Segoe UI';}
.alert {background: red; color: white;}
.hidden {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert hidden">This is an alert!</div>
<button id="callAlert">Hi</button>

#2

Here's a simple slide up transition using the script you sent

这是使用您发送的脚本的简单上滑过渡

$(document).ready(function() {
  $('.alert-notification').click(function() {
    setTimeout(function() {
      $(".alert-notification").slideUp();
    }, 100);
    return false;
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="alert alert-notification">test</div>

#1