38

ページを更新せずにボタン クリック イベントでアラート ボックスを複数回表示したいのですが、アラート ボックスは 1 回しか表示されません。アラート ボックスを再度表示するには、ページを更新する必要があります。

現在、ページにブートストラップ アラートをレンダリングすると、それを閉じると、アラートの div コンテナーがページから消えます。そのため、ボタンをもう一度クリックすると、もう表示されません。閉じるボタンで次のことを行って、アラートのdivコンテナーを削除する代わりに非表示にしました。

<button class="close" onclick="$('#alertBox').hide();; return false;">×</button>

ブートストラップで data-toggle または data-dismiss を使用すると、独自のカスタム Javascript ハンドラーを使用せずに、この種のトグル効果を機能させることができるのではないかと思います。

4

9 に答える 9

54

私は同じ問題を抱えていました.data-dismiss閉じるボタンからを使用せず、JQueryで作業しshow()てhide()ください.

$('.close').click(function() {
   $('.alert').hide();
})

次のコードを使用して、ボタンをクリックしたときにアラートを表示できます。

$('.alert').show()

お役に立てれば！

于 2012-06-14T08:45:50.510 に答える
36

実際には、次のようなものを使用することを検討する必要があります:

$('#the-thing-that-opens-your-alert').click(function () {
  $('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
});

$('.close').click(function () {
  $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});

ブートストラップのフェード/インは、完全な Javascript で Jquery hide/show の代わりに CSS3 を使用します。私の要点は、モバイル デバイスでは、CSS3 が Js よりも高速であるということです。

HTML は次のようになります。

<a id="the-thing-that-opens-your-alert" href="#">Open my alert</a>

<div id="le-alert" class="alert alert-warn alert-block fade">
  <button href="#" type="button" class="close">&times;</button>
  <h4>Alert title</h4>
  <p>Roses are red, violets are blue...</p>
</div>

そして、これはかなりクールです！jsFiddleで確認してください=）

于 2013-04-18T08:30:58.963 に答える
3

モデル変数を使用してダイアログを表示/非表示にし、 data-dismiss="alert" を削除しました

例えば

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria- hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

私にとってはうまくいき、jqueryに出かける必要がなくなります

于 2014-05-19T07:27:35.157 に答える
0 

$(document).on('click', '.close', function() {

   $('.alert').hide();

});

すべての要素で利用可能で、新しく含まれる要素

于 2015-03-03T23:41:47.897 に答える
0

Leikoのソリューションに基づいて、次の作業アプローチを使用しました。

$(document).ready(function(){
    $("#btnFV").click(function()
    {
        $("#alertFV").addClass("in");
    });

    $("#alertFV").on("close.bs.alert", function ()
    {
        $("#alertFV").removeClass("in");
        return false;
    });
});

HTML 本文に以下の警告が含まれています

<button id="btnFV" class="form-control">Button To Show/Hide Alert</button>

<div id="alertFV"  class="alert alert-danger alert-dismissable fade show">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
      </button>
      <strong>Danger!</strong> 
    </div>
于 2018-07-15T17:14:33.937 に答える