Twitter Bootstrapアラートメッセージを閉じて再度開く

警告メッセージに問題があります。これは通常表示され、ユーザーが押すx（閉じる）と閉じることができますが、ユーザーがもう一度表示しようとすると（たとえば、ボタンイベントをクリックする）、表示されません。（さらに、この警告メッセージをコンソールに出力すると、と等しくなり[]ます。）私のコードは次のとおりです。

 <div class="alert" style="display: none">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>

そしてイベント：

 $(".alert").show();

PS！何らかのイベント（ボタンのクリックなど）が発生した後でのみアラートメッセージを表示する必要があります。または私が間違っていることは何ですか？

データを閉じると、要素が完全に削除されます。代わりにjQueryの.hide（）メソッドを使用してください。

fix-it-quickメソッド：

次のようにインラインJavaScriptを使用してonclick要素を非表示にします。

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNF​​L/

ただし、これは怠惰な場合にのみ使用する必要があります（保守可能なアプリが必要な場合、これは良いことではありません）。

適切な方法：

要素を非表示にするための新しいデータ属性を作成します。

JavaScript：

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

マークアップでdata-dismissをdata-hideに変更します。jsfiddleでの例。

$("." + $(this).attr("data-hide")).hide()

これにより、data-hideで指定されたクラスのすべての要素が非表示になります。つまりdata-hide="alert"、アラートクラスのすべての要素が非表示になります。

Xeon06は代替ソリューションを提供しました：

$(this).closest("." + $(this).attr("data-hide")).hide()

これにより、最も近い親要素のみが非表示になります。これは、各アラートに一意のクラスを与えたくない場合に非常に役立ちます。ただし、アラート内に閉じるボタンを配置する必要があることに注意してください。

jquery docからの.closestの定義：

セット内の各要素について、要素自体をテストし、DOMツリー内のその祖先をたどって、セレクターに一致する最初の要素を取得します。

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

この問題への良いアプローチclose.bs.alertは、アラートを削除するのではなく、Bootstrapのイベントタイプを利用してアラートを非表示にすることです。Bootstrapがこのイベントタイプを公開するのは、DOMからアラートを削除するというデフォルトの動作を上書きできるようにするためです。

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

knockout.js（私が強くお勧めします）などのMVVMライブラリを使用している場合は、よりクリーンに実行できます。

<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
   <button type="button" class="close" data-bind="click:function(){showAlert(false);}>
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/

したがって、動的なhtmlページに対処できるソリューションが必要な場合は、すでにインクルードしているので、jQueryのライブを使用して、dom内の現在または将来のすべての要素にハンドラーを設定するか、削除する必要があります。

私が使う

$(document).on("click", "[data-hide-closest]", function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.closest($this.attr("data-hide-closest")).hide();
});

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}
.close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
  <a class="close" data-hide-closest=".alert">×</a>
  <strong>Success!</strong> Your entries were saved.
</div>

これは私にとって最もうまくいきました：

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).hide();
});

私もこの問題に遭遇しましたが、閉じるボタンをハックするだけの問題は、標準のブートストラップアラート閉じるイベントへのアクセスが必要なことです。

私の解決策は、適切に形成されたBootstrap 3アラート（必要に応じて閉じるボタンの有無にかかわらず）を最小限の手間で注入し、ボックスを閉じた後に簡単に再生成できる、カスタマイズ可能な小さなjqueryプラグインを記述することでした。

使用方法、テスト、および例については、https：//github.com/davesag/jquery-bs3Alertを参照してください。

Henrik Karlssonが投稿し、Martin Prikrylが編集した回答に同意します。アクセシビリティに基づく提案が1つあります。その末尾に.attr（ "aria-hidden"、 "true"）を追加すると、次のようになります。

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");

上記のソリューションはすべて、angularまたはjQueryのいずれかの外部ライブラリと、古いバージョンのBootstrapを使用します。したがって、Bootstrap 4に適用された純粋なJavaScriptでのCharles Wyke-Smithのソリューションを次に示します。はい、Bootstrapは独自のモーダルコードとアラートコードにjQueryを必要としますが、誰もがjQueryで独自のコードを作成するわけではありません。

アラートのhtmlは次のとおりです。

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

最初はアラートが非表示（style="display: none;"）であり、標準data-dismiss="alert"ではなく、ここで使用していることに注意してくださいdata-hide="alert"。

アラートを表示して閉じるボタンをオーバーライドするJavaScriptは次のとおりです。

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

コードの別の場所でプログラムによってアラートを非表示または表示する場合は、 myAlert.style.display = 'none';またはを実行しmyAlert.style.display = 'block';ます。

この問題は、を使用することで発生しstyle="display:none"ます。JavaScriptでアラートを非表示にするか、少なくとも表示する場合は、style属性を削除してください。

他の回答とデータ非表示からデータ非表示への変更に基づいて、この例ではリンクからのアラートのオープンを処理し、アラートを繰り返しオープンおよびクローズできるようにします

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});

私はすべての方法を試してみたし、私のために最善の方法は、内蔵のブートストラップクラスを使用することです .fadeし、.in

例：

<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>

注：jQueryでは、addClass（ 'in'）でアラートを表示し、removeClass（ 'in'）でアラートを非表示にします。

面白い事実：これはすべての要素で機能します。アラートだけではありません。

ここをベースにしたソリューションである答えによって、ヘンリック・カールソンが、適切なとトリガイベントは、（に基づいて、ブートストラップソース）：

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

注として、私にとってはほとんど答えです。

これは、単に「コンテナー」divを追加して、削除されたアラートdivを毎回追加するだけでは実行できませんか？私のために働くようです？

HTML

<div id="alert_container"></div>

JS

 $("#alert_container").html('<div id="alert"></div>');          
 $("#alert").addClass("alert alert-info  alert-dismissible");
 $("#alert").html('<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Info!</strong>message');