Come mostrare un messaggio popup come in Stack Overflow

Vorrei aggiungere un messaggio popup come quello che appare su Stack Overflow quando non sono connesso e provo a utilizzare i pulsanti di voto.

Qual è il metodo migliore per ottenerlo? È fatto usando una libreria jquery?

MODIFICA : il codice seguente mostra come replicare le barre che vengono visualizzate nella parte superiore dello schermo quando ottieni un nuovo badge, prima vieni sul sito, ecc. Per le finestre di dialogo che si ottengono quando provi a commentare troppo velocemente, vota per la tua domanda, ecc. controlla questa domanda in cui mostro come farlo o vai direttamente all'esempio .

Ecco come lo fa Stackoverflow:

Questo è il markup, inizialmente nascosto in modo da poterlo sfumare in:

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

Ecco gli stili applicati:

#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 questo è javascript (usando jQuery):

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

E voilà. A seconda dell'impostazione della pagina, potresti anche voler modificare il margine superiore del corpo sul display.

Eccone una demo in azione.

Controlla anche jQuery UI Dialog

Io uso jqModal , facile da usare e puoi ottenere degli ottimi effetti

Utilizzare ModalPopup nel toolkit di controllo AJAX è un altro modo per ottenere questo effetto.

Ecco cosa ho trovato visualizzando il sorgente StackOverflow. Si spera di risparmiare un po 'di tempo per qualcuno. La funzione showNotification viene utilizzata per tutti quei messaggi popup.

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

È bello come usano la lunghezza del messaggio per impostare il timeout di dissolvenza. Non mi ero reso conto che tutti i messaggi (stile non dissolvenza) in realtà svaniscono dopo 30 secondi.

Controlla il bootstrap . Ci sono alcuni effetti pop-up, modali, transizioni, avvisi, tutto basato su javascripte css.