Question

我尝试使用以下脚本示例隐藏警报，但没有一个工作，并且在显示警报后，我无法设置时间。我坚持这个。请告诉我，我的错误在哪里。

示例1：

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

示例2：

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

这两个示例都在工作并关闭警报但不在特定时间。我在jQuery document.ready谢谢！

中调用此函数

Answer 1

您应该在显示提醒时实际呼叫它们，而不是在$(document).ready()功能期间。

<强>段：

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

无法设置引导警报关闭时间

2 个答案: