4

我一直试图让引导程序的警报消息像导航栏组件一样粘在顶部，但没有成功。

首先，上下文：
我通过 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 像素，但不能使它工作。

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

4

3 回答 3

4

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

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

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

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

于 2013-06-28T13:24:40.233 回答
3

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

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>');
    }
}
于 2013-06-28T13:27:42.860 回答
0

您可以在导航栏之前创建一个 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);

于 2016-01-09T17:38:43.223 回答