Cara menampilkan pesan popup seperti di Stack Overflow

Saya ingin menambahkan pesan popup seperti yang muncul di Stack Overflow saat saya tidak masuk dan saya mencoba menggunakan tombol pemungutan suara.

Apa metode terbaik untuk mencapai itu? Apakah itu dilakukan dengan menggunakan perpustakaan jquery?

EDIT : Kode di bawah ini menunjukkan cara mereplikasi bilah yang muncul di bagian atas layar ketika Anda mendapatkan lencana baru, pertama kali datang ke situs, dll. Untuk dialog melayang yang Anda dapatkan saat mencoba berkomentar terlalu cepat, pilih untuk pertanyaan Anda sendiri, dll., periksa pertanyaan ini di mana saya menunjukkan bagaimana melakukan ini atau langsung ke contoh .

Berikut cara Stackoverflow melakukannya:

Ini adalah markup, awalnya disembunyikan sehingga kita dapat memudarkannya:

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

Berikut gaya yang diterapkan:

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

Dan ini javascript (menggunakan jQuery):

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

Dan voila. Bergantung pada pengaturan halaman Anda, Anda mungkin juga ingin mengedit body margin-top pada tampilan.

Ini demo aksinya.

Juga periksa Dialog UI jQuery

Saya menggunakan jqModal , mudah digunakan dan Anda dapat mencapai beberapa efek hebat

Menggunakan ModalPopup di toolkit kontrol AJAX adalah cara lain untuk mendapatkan efek ini.

Inilah yang saya temukan dari melihat sumber StackOverflow. Semoga menghemat waktu untuk seseorang. Fungsi showNotification digunakan untuk semua pesan popup tersebut.

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

Sangat keren bagaimana mereka menggunakan panjang pesan untuk mengatur batas waktu pemudaran. Saya tidak menyadari bahwa semua pesan (gaya tidak memudar) benar-benar memudar setelah 30 detik.

Periksa bootstrap . Ada beberapa efek pop-up, modals, transisi, peringatan, semuanya berdasarkan javascriptdan css.