web-dev-qa-db-ja.com

ボタンのクリックでbootstrap=アラートのオンとオフを切り替えるには？

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

現在、ページでbootstrapアラートをレンダリングする場合、閉じたときにアラートのdivコンテナはページから消えます。したがって、ボタンを再度クリックしても表示されません。アラートのdivコンテナを削除する代わりに非表示にするために、閉じるボタンで次の操作を行っています。

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

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

jqueryjquery-uitwitter-bootstrap
34
ttback

私は同じ問題を抱えています：閉じるボタンから_data-dismiss_を使用せずに、JQuery show()およびhide()を操作しないでください：

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

コードを使用して、ボタンをクリックしたときにアラートを表示できるようになりました。

_$('.alert').show()
_

お役に立てれば！

49
Ron

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

$('#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
});

As bootstrap fade/inは、完全な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 =）で確認してください

36
Leiko

モデル変数を使用してダイアログを表示/非表示にし、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に行く必要を止めます

3
user1661621

これを実現するためにjqueryを使用する必要はありません。これがブートストラップのみのソリューションです。

オン/オフボタン：

<button type="button" class="btn" data-toggle="collapse" href="#my-alert-box">
   <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</button>

アラートを非表示にする閉じるボタンのあるアラート（表示/非表示ボタンをクリックするのと同じ）：

<div id="my-alert-box" class="alert alert-info collapse" role="alert">
   <button type="button" class="close" data-toggle="collapse" href="#my-alert-box">
      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
   </button>
   <p>Look, here's a show/hide alert box without jquery...</p>
</div>
2
Bjorn

あなたは付け加えられます .hiddenクラスに警告してから、それをやり過ぎます。参照： JSFiddle

[〜＃〜] html [〜＃〜]

<a id="show-my-alert" href="#">Show Alert</a>

<div id="my-alert" class="alert alert-warning hidden" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">    
        <span aria-hidden="true">&times;</span>
    </button> 
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

JavaScript

$("#show-my-alert, .close").click(function() {
    $("#my-alert").toggleClass("hidden");
});
1
Alexey
$(document).on('click', '.close', function() {

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

});

それはすべての要素に利用可能であり、新しく含まれた要素

0
Bestafiko Borizqy

表示/非表示するには、受け入れられた答えのようにこれを行うことができます：

私は同じ問題を抱えています：閉じるボタンから_data-dismiss_を使用せずに、JQuery show()およびhide()を操作しないでください：

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

コードを使用して、ボタンをクリックしたときにアラートを表示できるようになりました。

_$('.alert').show()
_

お役に立てれば！

または、アラートを折りたたんでもヘッダーを表示する折りたたみ可能なアラートを作成しようとしていました。これを行ったので、_position:fixed;_にしてから、他のコンテンツコンテンツを表示できます。しかし、これは難しいので、回避策を作成しました。却下ボタンをクリックすると、ポップアップ_display:none;_が設定され、最初にコンテンツが最初に表示されないようにする必要がある場合があるため、表示に従って表示/非表示を切り替える改行を追加しますアラートの。そのため、2つのアラートは、閉じる（_display:none;_）をクリックすると、1行のコンテンツのみを持つ他のポップアップを表示します。このポップアップがクリックされると、メインアラートが_display:block;_に設定され、また、改行が改行されます。以下にコードを示します。これで、探索が完了しました。

_function ShowALERT() { 
  document.getElementById('ALERT').style.display = "block";
        document.getElementById('ShowALERT').style.display = "none";
        document.getElementById('breakShowALERT').style.display = "none";
        document.getElementById('breakALERT').style.display = "block";
        
}
function closeALERT() { 
   document.getElementById('ALERT').style.display = "none";
document.getElementById('breakShowALERT').style.display = "block";
  document.getElementById('ShowALERT').style.display = "block";
document.getElementById('breakALERT').style.display = "none";
        
}_
_#ALERT {
        position:fixed;
        display:block;
        width:100%;
        z-index:1;
        left:0px;
        top:0px;
        
        }
  #ShowALERT {
position: fixed;
display:none;
z-index:1;
top:0px;
left:0px;
width: 100%;
}
#breakShowALERT {
display:none;
}
        #breakALERT {
display:block;
}_
_<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <button id="ShowALERT"  onclick="ShowALERT()" class="bg-primary"> 

          <h5> <b>Important Alert</b></h5>
</button>
</div>
<div class=container>
   <div id="ALERT" class="alert bg-primary alert-dismissable">
 <a href="#" class="close" onclick="closeALERT()" aria-label="close">Dismiss</a>
 <h5><b>Note:</b> Alert Content here......................</h5>
</div>
 </div>
 <body>
 <div id='breakALERT'><br><br><br><br><br></div>
                                        <div id='breakShowALERT'><br><br></div>
 <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
 </body>_
0
user8803833

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

$(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>
0
jsa

これを試すこともできます：

$("#MyBtn").click(function() {

    if($("#MyAlrt").is(":visible")){
        $("#MyAlrt").hide();
    }else{
        $("#MyAlrt").show();
    }

});

それは私にとって非常に素晴らしい仕事でした。

0
user1321759