Bootstrap警告自动关闭

Question

Bootstrap警告自动关闭

209

我的需求是，在我点击“添加到愿望清单”按钮时调用alert，并在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>

- srikanth_naalla

1

可能是https://dev59.com/IHLYa4cB1Zd3GeqPVDk7和https://dev59.com/xGsz5IYBdhLWcg3w0bOl的重复问题。 - 4dgaurav

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cdsaenz · Answer 1

根据@Ionny的答案，我在Bootstrap 5中使用这个功能来关闭多个警告消息（验证错误）。我使用CSS类alert-flash来仅针对特定的警告块。

/**
 * Auto hide the flash alerts after a few seconds
 */
setTimeout(function() {
    var alertList = document.querySelectorAll('.alert-flash');
    alertList.forEach(function (alertNode) {
        bootstrap.Alert.getOrCreateInstance(alertNode).close(); 
    })
}, 3000)

- R M Shahidul Islam Shahed · Answer 2

C# 控制器：

var result = await _roleManager.CreateAsync(identityRole);
   if (result.Succeeded == true)
       TempData["roleCreateAlert"] = "Added record successfully";

Razor页面：

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

- AggWasRa 011 · Answer 3

即使您多次点击按钮，这也可以完美地工作。在这里，我创建了一个onClick函数来触发closeAlert函数。

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

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

    }, 3000);

 }