5

画像 #1: .in クラスを使用したブートストラップ アラート:

ここに画像の説明を入力

画像 #2: .in クラスのないブートストラップ アラート(下にコンテンツを非表示):

ここに画像の説明を入力

過去 3 時間から、他のコンテンツを置き換えることなく、アラートが完全に機能するように努めてきました。いくつかのブログ投稿と SO Q&A を読みましたが、目的の効果を達成できませんでした。

試み：

  • 閉じる (Dismissable Alerts) -または- フェードアウトすると、display: none;コンテンツが効果的に置き換えられます。
  • フェードアウトではなく .in クラスを削除すると、要素が非表示になりますが、他の要素と重なっています (下の画像 #2 と HTML を参照)。
  • Z-Index を使用してこの問題を解決しようとしましたが、うまくいきませんでした。
  • SO を介してより良い解決策が見つからない限り、次にポップオーバー アラートを試みます。

HTML:

<div class="alert alert-message alert-info fade"><p> Joined: StaticRoom </p></div>

JavaScript:

function status(type, msg) {
    var alertHTML = "<div class='alert alert-message alert-" + type + " fade'><p> " + msg + " </p></div>";

    $("#roomInfo").html(alertHTML);
    $(".alert-message").addClass("in");

    setTimeout(function () {
      $(".alert-message").removeClass("in");
    }, 3000);  
}

画像 #3: 望ましい:

  1. アラートが期限切れになった後の重複なし
  2. 有効期限が切れたときに既存のコンテンツを置き換えてはなりません:

ここに画像の説明を入力

ヘルプ！

4

1 に答える 1

2

これは、アラート セルフheight、paddingおよびが原因marginです。.fadeクラスは値のみを変更しopacity、それ以上は変更しません:

から抽出bootstrap.css

.fade{
    opacity:0;
    -webkit-transition:opacity .15s linear;
    transition:opacity .15s linear
}
.fade.in{
    opacity:1
}

できることは、Bootstrap CSS を次のようにオーバーライドすることです。

.fade {
    height: 0;
    padding: 0;
    margin: 0;
    -webkit-transition:height .15s linear;
    transition:height .15s linear;
}
.fade.in {
    height: auto;
    padding: 15px;
    margin-bottom: 20px;
}

**編集**
絶対的な位置付けられたアラートが必要だとは思いませんでした。したがって、追加のクラスは必要ありません。単純なものだけです。

.movie {
    position: relative;
    width: 430px;
    margin: 20px auto;
    padding: 5px;
    padding-bottom: 40px; /* give extra space for form */
}
.movie form {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 5px;
}
.movie .alert {
    position: absolute;
    bottom: 30px; left: 5px; right: 5px;
}
于 2013-11-03T12:57:37.980 に答える