Comment afficher un message contextuel comme dans Stack Overflow

Je voudrais ajouter un message contextuel comme celui qui apparaît sur Stack Overflow lorsque je ne suis pas connecté et que j'essaye d'utiliser les boutons de vote.

Quelle est la meilleure méthode pour y parvenir? Est-ce fait en utilisant une bibliothèque jquery?

EDIT : Le code ci-dessous montre comment reproduire les barres qui s'affichent en haut de l'écran lorsque vous obtenez un nouveau badge, arrivez en premier sur le site, etc. Pour les boîtes de dialogue qui surviennent lorsque vous essayez de commenter trop vite, votez pour votre propre question, etc., consultez cette question où je montre comment faire cela ou passez directement à l' exemple .

Voici comment Stackoverflow le fait:

Voici le balisage, initialement caché pour que nous puissions le faire apparaître:

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

Voici les styles appliqués:

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

Et c'est javascript (en utilisant jQuery):

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

Et voila. En fonction de la configuration de votre page, vous souhaiterez peut-être également modifier la marge supérieure du corps à l'écran.

En voici une démonstration en action.

Consultez également la boîte de dialogue de l'interface utilisateur jQuery

J'utilise jqModal , facile à utiliser et vous pouvez obtenir de superbes effets

L'utilisation de ModalPopup dans la boîte à outils de contrôle AJAX est une autre façon d'obtenir cet effet.

Voici ce que j'ai trouvé en regardant la source StackOverflow. Espérons que cela fait gagner du temps à quelqu'un. La fonction showNotification est utilisée pour tous ces messages contextuels.

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

C'est cool de voir comment ils utilisent la longueur du message pour définir le délai de fondu. Je n'avais pas réalisé que tous les messages (de style sans fondu) disparaissaient en fait après 30 secondes.

Vérifiez bootstrap . Il y a des effets pop-up, des modaux, des transitions, des alertes, tout basé sur javascriptet css.