jquery - Twitter Bootstrap - 获取警告消息以粘贴到页面顶部

Question

我一直在尝试获取 bootstrap's alerts消息像导航栏组件一样贴在顶部，但没有成功。

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

这是我尝试创建一个行为类似于警报消息的 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 个像素，但无法实现。

知道我需要设置什么才能让它工作吗？

Answer 1

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

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

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

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