Question

我的引导程序警报没有自动向上滑动的问题。在我的default.aspx中，我完成了以下操作：

1）将js和bootstrap链接到头部（尝试不同的版本和链接，也将它们放在关闭的body标签之前）：

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

2）将以下脚本放在头上：

window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
    $(this).remove(); 
});
}, 4000);

3）在体内运行：

<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
<span aria-hidden="true">&times;</span></button>
<strong>Success!</strong> You have been signed in successfully!
</div>

这个工作。我已经尝试了更高版本的js以及Bootstrap，但它仍然不起作用 - 警报只是不会滑动！

正如您所见，它在这里完美运作：https://codepen.io/CSWApps/pen/XJoLmN

那为什么它在我的项目中不起作用？

我尝试过的其他事情是清除缓存和不同的浏览器。

Answer 1

您可以检查调用Timeout函数和控制台日志$（this）变量然后检查任何错误或不一致

window.setTimeout(function() {
console.log("Timeout");
$(".alert").fadeTo(500, 0).slideUp(500, function(){
    console.log($(this));
    $(this).remove(); 
});
}, 4000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
rel="stylesheet"/>
<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
<span aria-hidden="true">&times;</span></button>
<strong>Success!</strong> You have been signed in successfully!
</div>

使用javascript关闭Bootstrap警报

1 个答案: