5

图片 #1:带有.in 类的引导警报:

在此处输入图像描述

图片 #2:没有.in 类的引导警报(隐藏下面的内容):

在此处输入图像描述

自过去三个小时以来,我一直在尝试让警报完美运行 - 而不会取代其他内容。我已经阅读了一些博客文章和 SO Q&A 但无法达到预期的效果。

尝试:

  • Closing (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

这是由警觉的自我引起的heightpadding并且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 回答