引导警报自动关闭


153

我需要在单击“添加到愿望清单”按钮时拨打警报,并且应该在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

Answers:


275

为了顺利滑动:

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


3
第二次单击该按钮不起作用。由于alert('close')的原因,如果您使用slideUp(),它正在工作@ICanHasKittenz
法提赫·阿尔普

很漂亮,但是这行$(“#success-alert”)。alert();是什么?用法?我已将其删除并且也可以工作。
罗伯托·塞普尔韦达·布拉沃

1
@RobertoSepúlvedaBravo是为警报框提供关闭功能,但是您是对的,这里不需要,因为我们正在使用该data-dimiss="alert" 属性。将更新脚本。
AyB

没有为我工作。但是,下面的其他示例工作正常。
Terje Nesthus

@TerjeNesthus您能解释一下到底什么不起作用吗?警报不向上滑动?还是第二次不工作?我能知道您的引导程序的版本吗?这本来是针对Bootstrap 3的,而我还没有在更高版本上对其进行测试。
AyB

56

使用fadeTo()在“我能有Kittenz”的代码是褪色的500在2秒不透明度是无法读取我。我认为最好使用诸如delay()的其他选项

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

41

为什么所有其他答案都用slideUp在我身上。当我使用fadein类使警报在关闭时(或在超时后)消失时,我不希望它“向上滑动”并与此冲突。

此外,该slideUp方法甚至无效。警报本身根本不显示。这是最适合我的方法:

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

1
短暂而甜蜜
Nawaraj

21

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

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

11

此问题的另一种解决方案: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>


这是一个很好的答案,因为它不仅限于显示tru JS消息,该消息可能在页面加载时已经显示。
Guillermo Oramas R. 18-3-26


1

必要时自动和手动触发

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

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

0

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

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

0

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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.