图片 #1:Bootstrap Alert 与 .in 类:
图片 #2:Bootstrap Alert 没有 .in 类(隐藏下面的内容):
自过去三个小时以来,我一直在尝试让警报完美运行 - 而不会取代其他内容。我已经阅读了一些博客文章和 SO Q&A,但无法达到预期的效果。
尝试:
- 关闭(可关闭警报) - 或 - 淡出使
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:期望:
- 警报过期后没有重叠
- 不应在过期时替换现有内容:
帮助!
最佳答案
这是由 alert self 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;
}
关于jquery - Bootstrap 3 : Alerts without displacing existing content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19752543/