Twitter Bootstrap - 获取警报消息以粘贴到页面顶部答案

【问题标题】：Twitter Boostrap - getting alert message to stick to the top of the pageTwitter Bootstrap - 获取警报消息以粘贴到页面顶部
【发布时间】：2013-06-28 13:17:38
【问题描述】：

我一直试图让bootstrap's alerts 消息像导航栏组件一样粘在顶部，但没有成功。

首先，上下文：
我正在通过 jQuery 发送一个 ajax 请求，然后处理响应。这部分的想法是完整的。我现在需要做的就是知道如何使警告消息出现在页面顶部导航栏正下方，由于引导程序的导航栏，该消息固定在顶部。我已经尝试了很多关于词缀类的事情，但仍然无法做到。

在这里我尝试创建一个 div 元素，其行为类似于警报消息：

success:function(msg) {
    if (msg == "fail") {
        $('body').append('<div class="alert alert-error affix-top"><button type="button" class="close" data-dismiss="alert">×</button><strong>Error !</strong> You can\'t specify a closed status if status is not set as "closed"</div>');
    }
}

所以我确信这可以工作，因为添加了警报消息但是......在页面底部。我希望它在导航栏组件下方像 5 像素，但无法使其工作。

知道我需要设置什么来完成这项工作吗？

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

如果您想在所有其他元素之前插入一个元素，请使用.prepend()。这会将对象作为第一个子对象插入，而不是像 .append() 这样的最后一个子对象：

success:function(msg) {
    if (msg == "fail") {
        $('body').prepend('<div class="alert alert-error affix-top">...</div>');
    }
}

将它放在页面顶部，然后由您来确保它在您想要的位置。

此外，我还会考虑使用模板系统或使用 jQuery 构建对象并避免插入长字符串（尽管我认为这可能是个人喜好）。

【讨论】：

这是一种解决方法，但我不只是希望它先于其他所有方法。我想要那种“浮动”状态，它只会显示在这个地方，而不是专门在 DOM 中的这个地方。明白我的意思了吗？
@MichaelDeKeyser：那么您可能想要使用绝对定位并使用 z-index。（你的意思是this？）
@MichaelDeKeyser：我不是 1005 精通引导程序，但您可以查看该示例的 stylesheet，了解他们如何设置 CSS 以使其固定在顶部。

【解决方案2】：

您应该将它附加到导航栏元素。

success:function(msg) {
    if (msg == "fail") {
        $('.navbar').append('<div class="alert alert-error affix-top"><button type="button" class="close" data-dismiss="alert">×</button><strong>Error !</strong> You can\'t specify a closed status if status is not set as "closed"</div>');
    }
}

【讨论】：

【解决方案3】：

你可以在导航栏前做一个div

<body>
    <div class="alert alert-success navbar-fixed-top" style="display:none; z-index:9999999999" id="dvmsg" role="alert">
        <div class="row">
            <div class="col-lg-offset-6">
                Success
            </div>
        </div>
    </div>
    <div>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
...

然后你可以从 JS 调用 $("#dvmsg").fadeIn().fadeOut(1000);

【讨论】：