So zeigen Sie Popup-Nachrichten wie im Stapelüberlauf an

Ich möchte eine Popup-Nachricht hinzufügen, wie sie im Stapelüberlauf angezeigt wird, wenn ich nicht angemeldet bin und versuche, Abstimmungsschaltflächen zu verwenden.

Was ist die beste Methode, um dies zu erreichen? Wird eine jquery-Bibliothek verwendet?

BEARBEITEN : Der folgende Code zeigt, wie Sie die Balken replizieren, die oben auf dem Bildschirm angezeigt werden, wenn Sie ein neues Abzeichen erhalten, zuerst zur Site gelangen usw. Für die schwebenden Dialoge, die Sie erhalten, wenn Sie versuchen, zu schnell zu kommentieren, stimmen Sie ab Schauen Sie sich für Ihre eigene Frage usw. diese Frage an, in der ich Ihnen zeige, wie das geht, oder gehen Sie einfach direkt zum Beispiel .

So macht es Stackoverflow:

Dies ist das Markup, das anfangs ausgeblendet wurde, damit wir es einblenden können:

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

Hier sind die angewendeten Stile:

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

Und das ist Javascript (mit jQuery):

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

Und voila. Abhängig von Ihrer Seiteneinrichtung möchten Sie möglicherweise auch den angezeigten Rand am oberen Rand bearbeiten.

Hier ist eine Demo davon in Aktion.

Überprüfen Sie auch den jQuery UI-Dialog

Ich benutze jqModal , einfach zu bedienen und Sie können einige großartige Effekte erzielen

Die Verwendung von ModalPopup im AJAX-Steuerungs-Toolkit ist eine weitere Möglichkeit, diesen Effekt zu erzielen.

Folgendes habe ich beim Anzeigen der StackOverflow-Quelle gefunden. Hoffentlich spart jemand etwas Zeit. Die showNotification-Funktion wird für alle diese Popup-Nachrichten verwendet.

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

Es ist cool, wie sie die Länge der Nachricht verwenden, um das Fading-Timeout festzulegen. Ich habe nicht bemerkt, dass alle (nicht verblassenden) Nachrichten nach 30 Sekunden tatsächlich ausgeblendet werden.

Überprüfen Sie den Bootstrap . Es gibt einige Popup-Effekte, Modalitäten, Übergänge, Warnungen, alles basierend auf javascriptund css.