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?
javascript
jquery
html
css
Puneet
sumber
sumber
Jawaban:
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:
Berikut gaya yang diterapkan:
Dan ini javascript (menggunakan jQuery):
Dan voila. Bergantung pada pengaturan halaman Anda, Anda mungkin juga ingin mengedit body margin-top pada tampilan.
Ini demo aksinya.
sumber
Juga periksa Dialog UI jQuery
sumber
Saya menggunakan jqModal , mudah digunakan dan Anda dapat mencapai beberapa efek hebat
sumber
Menggunakan ModalPopup di toolkit kontrol AJAX adalah cara lain untuk mendapatkan efek ini.
sumber
Inilah yang saya temukan dari melihat sumber StackOverflow. Semoga menghemat waktu untuk seseorang. Fungsi showNotification digunakan untuk semua pesan popup tersebut.
css
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.
sumber
Periksa bootstrap . Ada beberapa efek pop-up, modals, transisi, peringatan, semuanya berdasarkan
javascript
dancss
.sumber