Comment faire pour afficher le message contextuel comme à stackoverflow

Question

Je voudrais ajouter un message contextuel comme celle qui apparaît sur stackoverflow, quand je ne suis pas connecté et j’essaie d’utiliser des boutons de vote.

Quelle est la meilleure méthode pour atteindre ce ? Est-ce fait à l’aide d’une bibliothèque jquery ?

Answer 1

EDIT: Le code ci-dessous montre comment reproduire les barres qui s'affichent en haut de l'écran lorsque vous recevez un nouveau badge, premier arrivé sur le site, etc. Pour le vol stationnaire boîtes de dialogue que vous obtenez lorsque vous essayez de commenter trop vite, votez pour votre propre question, etc, découvrez cette question où je montre comment faire ceci ou juste aller directement à l' exemple.

---

Voici comment Stackoverflow:

C'est le balisage, d'abord caché afin que nous puissions en fondu:

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

Ici, ce sont 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 du javascript (à l'aide de jQuery):

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

Et le tour est joué. En fonction de votre mise en page, vous pouvez également modifier le corps de la marge-haut sur l'écran.

Voici une démo de en action.

Answer 2

Également commander jQuery UI dialogue

Answer 3

J’utilise jqModal, facile à utiliser et vous pouvez obtenir quelques grands effets

Answer 4

À l’aide de la ModalPopup dans AJAX control toolkit est une autre façon, vous pouvez obtenir cet effet.

Answer 5

Voici ce que j’ai trouvé d’affichant le code source StackOverflow. J’espère que sauve quelque temps pour quelqu'un. La fonction showNotification est utilisée pour tous les messages de popup.

CSS

C’est cool, comment ils utilisent la longueur du message pour définir le délai d’attente de décoloration. Je ne savais pas que tous les messages (style non-effacement) effectivement disparaître au bout de 30 secondes.