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 - 獲取警報消息堅持頁面頂部

回答

相關問題