ブートストラップアラートの自動クローズ


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 14

回答:


276

スムーズなスライドアップのために:

$("#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
ボタンを2回クリックしたときは機能しません。alert( 'close')のため、slideUp()を使用すると、@ ICanHasKittenzで機能します
Fatih Alp

美しく機能しますが、この行は何ですか$( "#success-alert")。alert(); 使用法?私はそれを削除して、うまくいきました。
RobertoSepúlvedaBravo 2017

1
@RobertoSepúlvedaBravoこれは、アラートボックスに閉じる機能を提供するためのものですが、data-dimiss="alert" 属性を使用しているため、ここでは必要ありません。スクリプトを更新します。
AyB 2017年

うまくいきませんでした。ただし、以下の他の例は問題なく機能しました。
Terje Nesthus 2017

@TerjeNesthus何がうまくいかなかったのか説明してくれませんか?アラートが上にスライドしていませんか?それとも2回目は機能していませんか?ブートストラップのバージョンを教えてください。これはBootstrap 3用であり、それ以降のバージョンではテストしていません。
AyB 2017

56

fadeTo()「I Can Has Kittenz」のコードで2秒で500の不透明度にフェードするを使用すると、私には判読できません。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

これに対するもう1つの解決策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に限定されず、ページが読み込まれたときにメッセージがすでに表示されている可能性があります。
ギジェルモオラマスR.18年

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

fadeToパラメータがfadeTo(speed、opacity)である場合


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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.