Comment afficher un message contextuel comme dans Stack Overflow

Question

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

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

Answer 1

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

Answer 2

Existe aussi jQuery UI Dialog

Answer 3

Utilisation du ModalPopup dans la boîte à outils de contrôle AJAX est une autre façon, vous pouvez obtenir cet effet.

Answer 4

EDIT: Le code ci-dessous montre comment répliquer les barres affichées en haut de l'écran lorsque vous obtenez un nouveau badge, d'abord sur le site, etc. Pour les boîtes de dialogue de survol que vous obtenez lorsque vous essayez pour commenter trop vite, voter pour votre propre question, etc, consultez this question où je montre comment faire cela ou tout simplement aller directement au example.

---

Voilà comment Stackoverflow le fait:

C'est le balisage, d'abord caché afin que nous puissions disparaître dans:

<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 ceci 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 pouvez également modifier la marge supérieure du corps à l'écran.

Here is a demo of it in action.

Answer 5

Voici ce que je trouve de voir le code source StackOverflow. Espérons économiser du temps pour 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;} 

Il est cool la façon dont ils utilisent la longueur du message pour régler le délai d'attente à la décoloration. Je ne me suis pas rendu compte que tous les messages (style sans fading) disparaissent après 30 secondes.

Answer 6

Vérifiez bootstrap. Il y a quelques effets pop-up, modaux, transitions, alertes, tout ce qui est basé sur javascript et css.