Stack Overflow'daki gibi açılır mesaj nasıl gösterilir

Oturum açmadığımda Stack Overflow'da görünen gibi bir popup mesajı eklemek istiyorum ve oylama butonlarını kullanmaya çalışıyorum.

Bunu başarmanın en iyi yöntemi nedir? Bir jquery kitaplığı kullanılarak mı yapılır?

DÜZENLEME : Aşağıdaki kod, yeni bir rozet aldığınızda, ilk olarak siteye geldiğinizde vb. Ekranın üst kısmında görünen çubukların nasıl kopyalanacağını gösterir. Çok hızlı yorum yapmaya çalıştığınızda aldığınız gezinme iletişim kutuları için oy verin kendi sorunuz vb. için, bunu nasıl yapacağımı gösterdiğim veya doğrudan örneğe gittiğim bu soruyu kontrol edin .

Stackoverflow bunu şu şekilde yapar:

Bu, işaretlemedir, başlangıçta gizlidir, böylece onu gizleyebiliriz:

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

İşte uygulanan stiller:

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

Ve bu javascript (jQuery kullanarak):

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

Ve voila. Sayfa kurulumunuza bağlı olarak, ekrandaki gövde kenar boşluğunu da düzenlemek isteyebilirsiniz.

İşte bunun bir demosu.

Ayrıca jQuery UI Dialog'a göz atın

Ben jqModal kullanıyorum , kullanımı kolay ve harika efektler elde edebilirsiniz

AJAX kontrol araç setinde ModalPopup kullanmak, bu efekti elde etmenin başka bir yoludur.

İşte StackOverflow kaynağını görüntülemekten bulduğum şey. Umarım birine biraz zaman kazandırır. ShowNotification işlevi, tüm bu açılır mesajlar için kullanılır.

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

Solma zaman aşımını ayarlamak için mesajın uzunluğunu kullanmaları harika. Tüm (solmayan stil) mesajların gerçekte 30 saniye sonra kaybolduğunu fark etmemiştim.

Önyüklemeyi kontrol edin . Bazı açılır efektler, modlar, geçişler, uyarılar, javascriptve tabanlı her şey var css.