Bootstrap Alert 弹框自动关闭

小开

最佳答案

平滑滑动:-

$("#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 Has Kittenz”的代码中使用2秒内渐隐到不透明度为500的fadeTo()对我来说是不可读的。我认为使用其他选项会更好，比如delay()

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

小开

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

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

小开

为什么所有其他答案使用slideUp只是超出了我。由于我使用fade和in类使警报在关闭时(或超时后)逐渐消失，我不希望它“滑动”并与此冲突。

此外，slideUp方法甚至不起作用。警报本身根本没有显示。以下是对我非常有效的方法:

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

小开

这个问题的另一个解决方案

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

小开

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

其中fadeTo参数为fadeTo(速度，不透明度)

小开

当需要时自动和手动跳跳虎

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


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

小开

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

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

小开

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


}

小开

我知道这个线程是旧的，但我只是想我将添加我的脚本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);
});
}