Question

我需要在点击“添加到心愿单”按钮时发出警报，并在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>

Answer 1

顺利进行滑动：

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

<强> Fiddle

Answer 2

使用fadeTo()在2秒钟内褪色到500的不透明度＆＃34;我可以拥有Kittenz＆＃34;的代码对我来说是不可读的。我认为使用其他选项如延迟（）

会更好

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

Answer 3

为什么所有其他答案都使用slideUp超出了我的范围。我正在使用fade和in类让关闭时（或超时后）警报逐渐消失，我不希望它向上滑动＆＃34;向上滑动＆＃34 34;并与之发生冲突。

除了slideUp方法甚至不起作用。警报本身根本没有显示。这对我来说非常有用：

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

Answer 4

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

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

Answer 5

另外一个解决方案 5秒后自动关闭或淡出引导警报消息：

这是用于显示消息的HTML代码：

<div class="alert alert-danger">
This is an example message...
</div>

JS片段

<script type="text/javascript">

$(document).ready(function () {
 
window.setTimeout(function() {
    $(".alert").fadeTo(1000, 0).slideUp(1000, function(){
        $(this).remove(); 
    });
}, 5000);
 
});
</script>

Answer 6

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

其中fadeTo参数为fadeTo（速度，不透明度）

Answer 7

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

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

Answer 8

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>

Answer 9

在需要时自动和手动触发

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

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

Answer 10

即使您多次单击该按钮，这也能完美运行。这里我创建了一个 onClick 函数来触发 closeAlert 函数。

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

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

    }, 3000);

 }

Bootstrap警报自动关闭

10 个答案: