stackoverflow tarzı bildirim çubuğu

Question

Olası Çoğalt:.?
Notification alert similar to how stackoverflow functions

'siz "xyz rozeti kazandı Nasıl yapılır gibi şeyler gösterir bildirim çubuğu üst, öyleyim benim raylar uygulamasında benzer bir şey yaratmaya çalışıyorum.Yerelim için blueprint kullanıyorum, standart bir tek sütun 950px mizanpajı, başlıktan aşağıya altbilgiden aşağıya herşeyi içeren bir kapsayıcı div.

Answer 1

Sayfanızda başka elementlere göre daha yüksek bir z-index sahip sabit bir pozisyon elemanı ile oldukça kolay bir şekilde yapabilirsiniz: Sonra

#notification { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: yellow; 
} 

öyle:

<div id="notification"> 
    You've earned xyz badge 
</div> 
<!-- rest of your site's markup --> 

Ve aşağıdaki CSS ile

$(window).load(function(){ 
    if(showNotification){ 
     $('body').append(
      $('<div id="notification">You\'ve earned xyz badge</div>'); 
     ); 
    } 
});