图片 #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:期望:
- 警报过期后没有重叠
- 过期时不应替换现有内容:
帮助!