Question

我一直试图让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个像素，但无法使其工作。

知道我需要设置什么才能使其正常工作？

Answer 1

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

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

将它放在页面的顶部，然后由你来确定它是你想要的地方。

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

Answer 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>');
    }
}

Answer 3

你可以在导航栏之前制作一个div

＆＃13;

<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">
...

＆＃13;

然后从JS你可以打电话 $（＆＃34;＃dvmsg＆＃34）。淡入（）淡出（1000）;

Twitter Bootstrap - 获取警告信息以粘贴在页面顶部

3 个答案: