web-dev-qa-db-ja.com

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();

P.S！何らかのイベントが発生した（たとえば、ボタンがクリックされた）後にのみアラートメッセージを表示する必要があります。または私が間違っているのは何ですか？

javascriptjquerytwitter-bootstrapalert
95
user721588

データを破棄すると、要素が完全に削除されます。代わりに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/

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

do-it-rightメソッド：

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

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ツリーでその祖先を上にたどって、セレクターに一致する最初の要素を取得します。

172
Henrik Karlsson

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

26
user1661621

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

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

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/

5
Ohad Schneider

したがって、動的htmlページに対処できるソリューションが必要な場合は、すでに含まれているため、jQueryのliveを使用して、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>
2
Joschi

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

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

私もこの問題に遭遇しましたが、閉じるボタンを単にハックすることの問題は、標準のbootstrap alert-closeイベントにアクセスする必要があることです。

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

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

1
Dave Sag

上記のソリューションはすべて、angularまたはjQueryのいずれかの外部ライブラリと、古いバージョンのBootstrapを使用します。そこで、ここに純粋なJavaScriptのCharles Wyke-SmithのソリューションをBootstrap 4に適用します。はい、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';を実行します。

0
Jaifroid

answer by Henrik Karlsson に基づくソリューションですが、適切なイベントトリガー（ベースon ブートストラップソース ）：

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

メモとして、主に私のための答え。

0
maxkoryukov

すべての方法を試しましたが、組み込みのbootstrapクラス.fadeおよび.inを使用するのが最善の方法です

例：

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

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

面白い事実：これはすべての要素に有効です。アラートだけでなく。

0
clodal

この問題はstyle="display:none"を使用することで発生します。Javascriptでalertを非表示にするか、少なくとも表示する場合はスタイル属性を削除する必要があります。

0
Plamen Nikolov

他の回答に基づいて、データ破棄をデータ非表示に変更すると、この例ではリンクからのアラートのオープンを処理し、アラートを繰り返し開いたり閉じたりできます。

$('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 */
   });
});
0
Charles Wyke-Smith