Twitter Boostrap - 获取警报消息坚持页面顶部

我一直试图让bootstrap's alerts消息像导航栏组件一样粘到顶部，但没有成功。Twitter Boostrap - 获取警报消息坚持页面顶部

首先，上下文：
我通过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>'); 
    } 
}

所以我肯定知道这个工程，因为添加了警报消息，但......在页面的底部。我希望它像navbar组件下的5像素，但不能使这个工作。

任何想法，我需要设置使这项工作？

来源

2013-06-28 Michael De Keyser

如果你想在之前插入一个元素所有其他元素使用.prepend()。此插入对象作为第一个孩子，而不是作为最后像.append()：

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

是得到它在页面的顶部，那么这将是由你来确保它就是你以后想要。另外，我还会考虑使用模板系统或使用jQuery构建对象，并避免长字符串插入（尽管我认为这可能是个人偏好）。

来源

2013-06-28 13:24:40

这是一种解决方法，但我并不简单地希望它在所有其他方面。我想要这种“浮动”状态，它只会在这个地方显示，而不会特别在DOM的这个地方。明白了吗？ –

@MichaelDeKeyser：那么你可能想要使用绝对定位和z-index一起玩。（类似[this]（http://tympanus.net/Development/jbar/）你的意思？） –

是的，正是这个。 –

您应该将其追加到导航栏元素。

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-28 13:27:42 Aleeeeee

您可以在导航栏之前进行股利

<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”）。淡入（）。淡出（1000）;

来源

2016-01-09 17:38:43

Twitter Boostrap - 获取警报消息坚持页面顶部

回答

相关问题