Jak wyświetlić komunikat wyskakujący, jak w przepełnieniu stosu

Chciałbym dodać wyskakującą wiadomość, taką jak ta, która pojawia się w Stack Overflow, gdy nie jestem zalogowany i próbuję użyć przycisków głosowania.

Jaka jest najlepsza metoda osiągnięcia tego? Czy jest to zrobione przy użyciu biblioteki jquery?

EDYTUJ : Poniższy kod pokazuje, jak replikować paski, które pojawiają się u góry ekranu po otrzymaniu nowej odznaki, pierwszym wejściu na stronę itp. W przypadku okien dialogowych, które pojawiają się, gdy próbujesz komentować zbyt szybko, zagłosuj w przypadku własnego pytania itp. sprawdź to pytanie, w którym pokazuję, jak to zrobić, lub po prostu przejdź od razu do przykładu .

Oto jak to robi Stackoverflow:

To jest znacznik, początkowo ukryty, abyśmy mogli go wprowadzić:

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

Oto zastosowane style:

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

A to jest javascript (używając jQuery):

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

I voila. W zależności od ustawień strony możesz również chcieć edytować górny margines treści na wyświetlaczu.

Oto demo tego w akcji.

Sprawdź także okno dialogowe interfejsu użytkownika jQuery

Używam jqModal , łatwego w użyciu i można osiągnąć świetne efekty

Korzystanie z ModalPopup w zestawie narzędzi kontroli AJAX to kolejny sposób na uzyskanie tego efektu.

Oto, co znalazłem podczas przeglądania źródła StackOverflow. Mam nadzieję, że zaoszczędzi komuś trochę czasu. Funkcja showNotification jest używana dla wszystkich tych komunikatów wyskakujących.

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

Fajnie, jak wykorzystują długość wiadomości, aby ustawić czas wygaszania. Nie zdawałem sobie sprawy, że wszystkie (nie blaknące) wiadomości faktycznie znikają po 30 sekundach.

Sprawdź bootstrap . Istnieją pewne efekty pop-up, modały, przejścia, alerty, wszystko oparte na javascripti css.