Como mostrar a mensagem pop-up como no Stack Overflow

Gostaria de adicionar uma mensagem pop-up como a que aparece no Stack Overflow quando não estou logado e tento usar os botões de votação.

Qual é o melhor método para conseguir isso? Isso é feito usando uma biblioteca jquery?

EDITAR : O código abaixo mostra como replicar as barras que aparecem na parte superior da tela quando você obtém um novo emblema, chega primeiro ao site, etc. Para as caixas de diálogo flutuantes que você obtém quando tenta comentar rápido demais, vote para sua própria dúvida, etc, verifique esta questão onde mostro como fazer isso ou apenas vá direto ao exemplo .

Veja como o Stackoverflow faz isso:

Esta é a marcação, inicialmente oculta para que possamos aparecer gradualmente:

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

Aqui estão os 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;
}

E isso é javascript (usando jQuery):

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

E voila. Dependendo da configuração da página, você também pode querer editar a margem superior do corpo na exibição.

Aqui está uma demonstração dele em ação.

Verifique também o jQuery UI Dialog

Eu uso o jqModal , fácil de usar e você pode conseguir ótimos efeitos

Usar o ModalPopup no kit de ferramentas de controle AJAX é outra maneira de obter esse efeito.

Aqui está o que descobri ao visualizar a fonte StackOverflow. Esperançosamente, economiza algum tempo para alguém. A função showNotification é usada para todas essas mensagens pop-up.

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;}

É legal como eles usam a duração da mensagem para definir o tempo limite de esmaecimento. Eu não percebi que todas as mensagens (estilo sem atenuação) realmente desaparecem após 30 segundos.

Verifique o bootstrap . Existem alguns efeitos pop-up, modais, transições, alertas, tudo baseado em javascripte css.