EDIT: El siguiente código muestra cómo replicar las barras que se muestran en la parte superior de la pantalla cuando obtiene una nueva insignia, primero ingresa al sitio, etc. Para los cuadros de diálogo que aparece cuando intenta para comentar demasiado rápido, votar por su propia pregunta, etc., consulte this question donde le muestro cómo hacerlo o simplemente vaya directamente al example.
Así es como Stackoverflow lo hace:
Este es el marcado, inicialmente oculta para que podamos desaparecer en:
<div id='message' style="display: none;">
<span>Hey, This is my Message.</span>
<a href="#" class="close-notify">X</a>
</div>
Aquí están los estilos aplicados:
#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:bold;
font-size:100%;
color:white;
padding:10px 0px 10px 0px;
background-color:#8E1609;
}
#message span {
text-align: center;
width: 95%;
float:left;
}
.close-notify {
white-space: nowrap;
float:right;
margin-right:10px;
color:#fff;
text-decoration:none;
border:2px #fff solid;
padding-left:3px;
padding-right:3px
}
.close-notify a {
color: #fff;
}
Y esto es javascript (usando jQuery):
$(document).ready(function() {
$("#message").fadeIn("slow");
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow");
return false;
});
});
Y listo. Dependiendo de la configuración de su página, es posible que también desee editar el margen del cuerpo superior en la pantalla.
Here is a demo of it in action.
Ver la fuente! –
lo hice, y parecía referirse a question.min.js No pude encontrar ese complemento, así que hice la pregunta – Puneet
Dojo tiene una barra de actualización que hace esto: http://trac.dojotoolkit.org/browser/branches /1.6/dojox/widget/UpgradeBar.js http://trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/UpgradeBar – mwilcox