ブートストラップ4表示アラート

Question

ブートストラップではどのようにしてJavaScript経由で警告を表示しますか？私の目標は、AJAX呼び出しが完了したときにページが読み込まれたときに警告を非表示にして、警告を表示してメッセージを表示することです。

私がどれだけ近いか、アラートが、ありません、それを表示する方法をどこドキュメントで参照

：その後、閉じるには、ボタンを押して、私は（私が欲しいものではない）最初の警告を表示し、次のバイオリンを持って https://getbootstrap.com/docs/4.0/components/alerts/#methods

それ。 2番目のボタンはそれを元に戻すことですが、それを動作させるために何を渡すべきかの手掛かりはありません。私は、それはページのロード時にDOMを破壊.alert

https://jsfiddle.net/jhf2e5h6/

<div class="row"> 
    <div class="col-sm-12"> 
    <div id="divInfo" class="alert alert-success show fade "> 
     <div class="alert-heading"> :</div> <p></p> 
    </div> 
</div> 
</div> 

<button id="close">Close</button> 
<button id="show">Show</button> 




<script type="text/javascript"> 
    $(function() { 




     $('#close').on('click', function() { 
      $('#divInfo').alert('close'); 
     }); 

     $('#Show').on('click', function() { 
      $('#divInfo').alert('?????'); 
     }); 

     // 
    }); 


</script> 

Answer 1

メソッドを表示されていないアラートに動作させるためにどのように把握することができます。このサンプル作品を作ることができる場合、私は把握します。だから戻ってくる可能性はない。ドキュメントを見てください： https://getbootstrap.com/docs/4.0/components/alerts/#methods

removeClass/addClassを使用してください。

$('#close').on('click', function() { 
    $('#divInfo').removeClass('show'); 
}); 

$('#show').on('click', function() { 
    $('#divInfo').addClass('show'); 
}); 

あなたは「表示」に間違いがありますので、「表示」してみてください。

Answer 2

は、DOMから削除して再表示することはできません。

あなたが代わりにinvisibleクラスを切り替えることができます...

https://www.codeply.com/go/mbshAxZQMH

$(function() { 
    $('#close').on('click', function() { 
     $('#divInfo').addClass('invisible'); 
    }); 

    $('#show').on('click', function() { 
     $('#divInfo').removeClass('invisible'); 
    }); 
});