80

Bootstrap でアラートを初めて見たとき、モーダル ウィンドウと同じように動作し、ドロップ ダウンまたはフェード インし、閉じるとフェード アウトすると思いました。しかし、それらは常に表示されているようです。アプリの上のレイヤーに配置して表示を管理できると思いますが、機能が組み込まれているかどうか疑問に思っていましたか?

ありがとう！

編集、私がこれまでに持っているもの:

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
4

10 に答える 10

143

前述のほとんどの回答に強く同意しません。

簡潔な答え：

「in」クラスを省略し、jQuery を使用して追加してフェードインします。

3 秒後にアラートがフェードインする例については、この jsfiddle を参照してくださいhttp://jsfiddle.net/QAz2U/3/

長い答え:

ブートストラップがアラートのフェードをネイティブにサポートしていないのは事実ですが、ここでのほとんどの回答では、JavaScript を使用して要素をアニメーション化 (フェード) する jQuery フェード関数を使用しています。これの大きな利点は、ブラウザ間の互換性です。マイナス面はパフォーマンスです (参照: CSS3 フェード アニメーションを呼び出す jQuery? )。

Bootstrap は CSS3 トランジションを使用しており、パフォーマンスが大幅に向上しています。モバイル デバイスにとって重要なのは次のうちどれですか。

CSS をブートストラップして、アラートをフェードします。

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

なぜこのパフォーマンスがそれほど重要だと思いますか? 古いブラウザーとハードウェアを使用している人は、jQuery.fade() でトランジションが不安定になる可能性があります。同じことが、最新のブラウザーを備えた古いハードウェアにも当てはまります。CSS3 トランジションを使用すると、最新のブラウザーを使用している人は古いハードウェアでもスムーズなアニメーションを取得できます。また、CSS トランジションをサポートしていない古いブラウザーを使用している人は、要素がポップインされるのをすぐに確認できます。これは、途切れ途切れのアニメーションよりも優れたユーザー エクスペリエンスだと思います。

上記と同じ答えを探してここに来ました：ブートストラップアラートをフェードインすることです。コードと Bootstrap の CSS を掘り下げた後、答えはかなり簡単です。アラートに「in」クラスを追加しないでください。アラートをフェードインしたい場合は、jQuery を使用してこれを追加します。

HTML (クラスに NO がないことに注意してください!)

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

Javascript:

function showAlert(){
  $("#myAlert").addClass("in")
}

上記の関数を呼び出すと、「in」クラスが追加され、CSS3 トランジションを使用してアラートにフェードインします :-)

タイムアウトを使用した例については、この jsfiddle も参照してください (John Lehmann に感謝します!): http://jsfiddle.net/QAz2U/3/

于 2012-11-06T19:05:39.953 に答える
28

私が使用するのはこれです：

テンプレートのアラート領域

<div id="alert-area"></div>

次に、アラートを表示するための jQuery 関数

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');
于 2011-12-15T01:17:38.057 に答える
18

jquery を使用してボックスをフェードインできます。「hide」クラスに組み込まれたブートストラップを使用して、div 要素に display:none を効果的に設定します。

<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
            <a class="close" href="#">×</a>
            <p><strong>Well done!</strong> You successfully read this alert message.</p>
        </div>

次に、次のようにjqueryでfadeIn関数を使用します。

$("#saveAlert").fadeIn();

また、fadeIn 関数の期間を指定することもできます。例: $("#saveAlert").fadeIn(400);

fadeIn 関数の使用に関する完全な詳細は、公式の jQuery ドキュメント サイト ( http://api.jquery.com/fadeIn/ ) にあります。

余談ですが、jquery を使用していない場合は、「hide」クラスを独自の CSS ファイルに追加するか、これを div に追加するだけです。

 <div style="display:none;" id="saveAlert">

その後、div は基本的にデフォルトで非表示に設定され、jQuery は fadeIn アクションを実行し、div を強制的に表示します。

于 2011-10-06T15:35:32.990 に答える
9

2.3 以降の場合は、次を追加するだけです。

$(".alert").fadeOut(3000 );

ブートストラップ:

<div class="alert success fade in" data-alert="alert" >
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    // code 
</div>

すべてのブラウザで動作します。

于 2013-02-21T23:34:07.097 に答える
6

hideにクラスを追加しalert-messageます。次に、jQuery スクリプトのインポートの後に次のコードを追加します。

$(document).ready( function(){
    $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
    window.setTimeout( function(){
        $(".alert-message").slideUp();
    }, 2500);
});

複数のメッセージを処理したい場合、このコードはそれらを昇順で非表示にします:

$(document).ready( function(){
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) {
      window.setTimeout( function(){
         $(el).slideUp();  // hide the message
      }, hide_delay + hide_next*index);
   });
});
于 2011-12-15T01:10:14.867 に答える
4

現在の答えはどれもうまくいきませんでした。Bootstrap 3 を使用しています。

ロブ フェルメールのやり方が好きで、彼の反応から始めました。

フェードインしてからフェードアウトする効果のために、次の関数を書き、jQuery を使用しました。

アラートを追加するページの HTML:

        <div class="alert-messages text-center">
        </div>

アラートを表示および非表示にする Javascript 関数。

function showAndDismissAlert(type, message) {
    var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';

    // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
    $(".alert-messages").prepend(htmlAlert);

    // Since we are prepending, take the first alert and tell it to fade in and then fade out.
    // Note: if we were appending, then should use last() instead of first()
    $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}

次に、アラートを表示および非表示にするには、次のように関数を呼び出します。

    showAndDismissAlert('success', 'Saved Successfully!');
    showAndDismissAlert('danger', 'Error Encountered');
    showAndDismissAlert('info', 'Message Received');

補足として、上に固定された div.alert-messages のスタイルを設定しました。

    <style>
    div.alert-messages {
        position: fixed;
        top: 50px;
        left: 25%;
        right: 25%;
        z-index: 7000;
    }
    </style>
于 2014-01-09T16:30:06.950 に答える
1

もちろんはい。プロジェクトでこの単純なファイルを使用します: https://gist.github.com/3851727

まず、次のように HTML を追加します。

<div id="messagebox" class="alert hide"></div>

そして、次を使用します。

$("#messagebox").message({text: "Hello world!", type: "error"});

error、successおよびプロパティなどのすべてのブートストラップ アラート タイプをオプションとして渡すことができwarningます。type

于 2012-10-13T09:53:28.537 に答える