Cómo mostrar un mensaje emergente como en Stack Overflow

Me gustaría agregar un mensaje emergente como el que aparece en Stack Overflow cuando no estoy conectado e intento usar los botones de votación.

¿Cuál es el mejor método para lograrlo? ¿Se hace usando una biblioteca jquery?

EDITAR : El código siguiente muestra cómo replicar las barras que se muestran en la parte superior de la pantalla cuando obtienes una nueva insignia, primero ingresa al sitio, etc. Para los cuadros de diálogo flotantes que obtienes cuando intentas comentar demasiado rápido, vota para su propia pregunta, etc., consulte esta pregunta donde muestro cómo hacer esto o simplemente vaya directamente al ejemplo .

Así es como lo hace Stackoverflow:

Este es el marcado, inicialmente oculto para que podamos fundirlo:

<div id='message' style="display: none;">
    <span>Hey, This is my Message.</span>
    <a href="#" class="close-notify">X</a>
</div>

Estos son 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 voilá. Dependiendo de la configuración de su página, es posible que también desee editar el margen superior del cuerpo en la pantalla.

Aquí hay una demostración en acción.

También consulte el diálogo de interfaz de usuario de jQuery

Yo uso jqModal , fácil de usar y puedes lograr grandes efectos

El uso de ModalPopup en el kit de herramientas de control AJAX es otra forma de obtener este efecto.

Esto es lo que encontré al ver la fuente de StackOverflow. Ojalá le ahorre algo de tiempo a alguien. La función showNotification se utiliza para todos esos mensajes emergentes.

var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};

//master...
showErrorPopup: function (e, h, f) {
    var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
    var i = function () {
        g.fadeOutAndRemove()
    };
    $(e).append(g);
    g.click(i).fadeIn("fast");
    setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}

css

.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}

Es genial cómo usan la longitud del mensaje para establecer el tiempo de espera de atenuación. No me di cuenta de que todos los mensajes (estilo que no se desvanecen) en realidad se desvanecen después de 30 segundos.

Compruebe bootstrap . Hay algunos efectos emergentes, modales, transiciones, alertas, todo basado en javascripty css.