Cara menampilkan pesan popup seperti di Stack Overflow

102

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?

Puneet
sumber
16
Lihat sumbernya!
Josh Stodola
Ada pertanyaan serupa . Anda mungkin ingin memeriksanya juga.
Shoban
8
saya melakukan itu, dan sepertinya merujuk ke question.min.js Saya tidak dapat menemukan plugin itu jadi saya mengajukan pertanyaan
Puneet

Jawaban:

154

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.

Paolo Bergantino
sumber
3
Membaca ulang pertanyaan saya rasa ini bukan yang diinginkan Op. Saya rasa dia mencari kotak yang muncul sebagai pemberitahuan di sekitar situs di dekat apa pun yang Anda lakukan. Saya kira saya akan meninggalkan ini lagian.
Paolo Bergantino
Paolo, Terima kasih telah meninggalkan ini! Saya pikir ini mungkin bekerja sedikit lebih baik daripada yang saya gunakan untuk tindakan ini.
Jayrox
3
Meskipun bukan jawabannya, sama-sama membantu: P
rball
Anda juga perlu menyetel cookie saat Anda mengklik X sehingga tidak terus muncul saat Anda membuka lebih banyak halaman.
DisgruntledGoat
1
Saya berharap saya bisa membintangi jawaban juga. Terima kasih untuk entri yang luar biasa ini!
ngeri
4

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

juan
sumber
4

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

patjbs
sumber
1
tolong beri komentar downvote, menggunakan popup modal benar-benar valid untuk apa yang ditanyakan pertanyaan asli.
patjbs
3

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.

dotjoe
sumber
0

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

steven967
sumber