10 Plugin Jendela Modal JavaScript Gratis
Kamu dapat menemukan banyak modalnya CSS murni tapi ini jangan menawarkan kontrol yang sama dengan JavaScript. Dengan modal JavaScript, Anda dapat menambahkan animasi khusus, input UI, dan benar-benar meningkatkan pengalaman pengguna.
Tapi, mengapa mendesain sesuatu dari awal kapan Anda bisa menggunakan perpustakaan JS? Saya telah mengumpulkan skrip modal bertenaga JavaScript terbaik gratis di sini untuk Anda membaca dengan teliti dan memilih favorit Anda.
Semua ini sepenuhnya gratis dan open-source, sehingga Anda dapat mengedit kode dan mengatur ulang kode agar sesuai dengan situs Anda sesuai kebutuhan.
1. Gelitik
Salah satu skrip modal gratis favorit saya adalah Tingle.js. Nya dibangun di atas vanilla JavaScript tanpa ketergantungan, jadi Anda tidak perlu perpustakaan jQuery atau Zepto.
Plus, itu adalah perpustakaan yang cukup kecil, meskipun memang ada banyak pilihan untuk kustomisasi. Anda dapat mengubah transisi CSS, animasi modal JavaScript, dan seluruh pengalaman pengguna hanya dengan beberapa pengaturan.
Tingle.js dirancang untuk menjadi sepenuhnya dapat diakses dan responsif, sehingga berfungsi pada perangkat seluler dan mendukung browser lama juga.
Anda bisa lihat semua dokumentasi tentang GitHub, bersama dengan kode sumber gratis. Mereka juga memiliki tautan demo, jadi Anda bisa lihat Tingle beraksi untuk melihat apakah itu bisa muat di situs web Anda.
2. Modal Vanila
Ini modal yang baru saya temukan dan baru-baru ini jauh lebih sederhana daripada kebanyakan. Vanilla Modal berdiri teguh pada namanya dengan a skrip vanila murni menyalakan modal, bersama dengan Transisi CSS.
Benda ini cukup kecil dan sangat fleksibel CSS khusus untuk mengatur ulang windows. Itu juga punya beberapa opsi yang dapat Anda ubah dengan JavaScript, menjadikannya sempurna untuk menjalankan fungsi DOM atau bahkan fungsi panggilan balik.
Mengintip halaman demo untuk melihat gaya default. Ini desain yang sangat mendasar, jadi pasti begitu memerlukan penyesuaian untuk menggunakannya di situs produksi. Tapi ini juga mengurangi total persyaratan kode, jadi begitu salah satu perpustakaan modal JavaScript tertipis.
3. plainModal
Jika Anda ingin skrip yang sangat sederhana, saya sangat merekomendasikan plainModal. ini dibangun di atas jQuery, tapi itu salah satu skrip modal terkecil yang tersedia.
Itu benar tidak menggunakan CSS eksternal atau file gambar. Hanya satu skrip JS tunggal yang Anda butuhkan.
Setelah skrip plainModal ditambahkan ke halaman Anda, Anda baru saja targetkan tombol modal dan kamu baik untuk pergi. Ini memberi Anda kendali atas tampilan dan seberapa banyak Anda ingin mengubah antarmuka modal.
Plus, kamu bisa mengatur modal dengan satu baris JavaScript sesuai dengan tema minimalis plugin ini.
4. Modaal
Tidak bisa disangkal aksesibilitas sangat besar di web. Tujuan setiap desainer haruslah a pengalaman yang lebih inklusif untuk orang-orang di seluruh dunia di berbagai perangkat & dengan keterbatasan yang mungkin.
Dengan Modaal, Anda mendapatkan pengalaman sempurna itu lulus tes WCAG 2.0 dengan peringkat aksesibilitas AA yang solid. Anda dapat melihat contoh fantastis di halaman utama, bersama dengan beberapa dokumentasi kode.
Secara keseluruhan, saya merekomendasikan plugin JavaScript vanilla ini untuk siapa saja yang benar-benar peduli tentang aksesibilitas. Peringkat AA dapat diminta pada beberapa proyek web, jadi Modaal adalah skrip yang sangat berguna untuk membuat bookmark.
5. Scotch JS Modal
Tim pengembang di Scotch.io menerbitkan tutorial dan panduan untuk pembuat kode. Pekerjaan mereka luar biasa dan benar-benar terlihat skrip modal JavaScript ini, di-host di Scotch GitHub.
Modal dikembangkan oleh Ken Wheeler dan skrip ini genap memiliki tutorial lengkap jika Anda ingin mempelajari cara kerjanya. Namun, kode gratis harus cukup untuk sebagian besar pengembang karena ini super ringan dan mudah diatur. Tidak ada dependensi, dan bahkan demo sampel di CodePen.
6. Bootbox.js
Cara tercepat untuk meluncurkan proyek web baru adalah melalui Bootstrap. Ini adalah kerangka kerja frontend yang kuat yang mendorong pengembang untuk melakukannya buat add-on mereka sendiri ke perpustakaan.
Salah satu contohnya adalah Bootbox.js, perpustakaan JavaScript kecil, dirancang semata-mata untuk modal windows di Bootstrap. Sebenarnya bekerja pada kotak dialog di mana pengguna dapat mengklik OK atau membatalkan, berdasarkan permintaan Anda.
Dialog JavaScript yang umum buruk, seperti kotak peringatan. Skrip Bootbox menawarkan a alternatif yang solid bagi siapa saja yang bekerja di ekosistem BS3 / BS4.
Sekali lagi, ini benar-benar gratis dan open-source, bersama dengan a halaman dokumentasi yang panjang untuk membuat Anda bangun & berlari cepat.
7. iziModal.js
Jika kamu butuh solusi yang sedikit lebih disesuaikan Periksa iziModal.js. Alat ini adalah sepenuhnya responsif dan dirancang untuk bekerja di semua browser modern dengan sempurna.
Saya belum menemukan naskah modal lain yang menawarkan desain yang begitu indah. Keluar dari gerbang dengan UI cantik yang dapat berbaur dengan situs web praktis apa pun. Namun, kamu bisa juga menata ulang desain sesuai dengan kebutuhan anda.
Perhatikan plugin ini tidak berjalan di jQuery, jadi itu salah satu dari sedikit di sini memiliki ketergantungan. Tapi, jika Anda ingin gaya iziModal itu adalah harga kecil untuk membayar jendela popover yang ramping.
8. jQuery Modal
Itu Plugin jQuery Modal mungkin itu skrip modal paling sederhana di jQuery yang pernah Anda temukan.
Ini dapat diprogram untuk secara otomatis mengikat dengan elemen HTML tertentu berdasarkan berbagai atribut. Juga mendukung pintasan keyboard seperti ESC untuk menutup jendela.
Secara total, plugin ini berukuran kurang dari 1KB dan itu berfungsi di setiap peramban yang mungkin dapat Anda bayangkan. Pengembang jQuery harus menyimpan plugin ini untuk akses cepat ke skrip modal sederhana tanpa embel-embel tambahan.
9. PicoModal
Kembali ke JavaScript vanilla, kami punya Perpustakaan PicoModal. Ini mungkin salah satu skrip terkecil yang akan Anda temukan dan dirancang untuk itu berjalan dengan sempurna pada tulang punggung JavaScript vanilla.
Saya t mendukung semua browser modern, termasuk peramban seluler untuk Android dan Mobile Safari untuk iOS. Bahkan mendukung browser IE yang lebih lama, kembali ke IE7!
Pengembang PicoModal membuat skrip JSfiddle kecil untuk menunjukkan cara kerjanya. Ini adalah contoh yang sangat kecil tidak terikat dengan acara klik atau apa pun, tapi itu tidak sulit skrip dalam beberapa tombol sakelar untuk menjalankan jendela modal ini dengan benar.
10. Avgrund
Avgrund mungkin salah satu dari modals paling unik dalam daftar ini. Ini menggunakan a efek memudar halaman kustom, bersama dengan animasi menyusut untuk membawa modal ke tampilan.
Tidak semua orang akan menghargai animasi ini, jadi saya tidak bisa mengatakan skrip ini cocok untuk setiap situs web. Tapi, itu adalah modal vanila murni dan itu sangat mudah untuk diatur, hanya dengan CSS dan file JavaScripte.
Lihatlah halaman demo untuk melihat cara kerjanya. Ini pasti punya gaya dan unik terikat untuk menarik perhatian dengan animasi khusus yang hanya berfungsi.
Kata-kata terakhir
Apa pun yang Anda cari, saya berani bertaruh ada sesuatu dalam daftar ini yang sesuai dengan kebutuhan Anda. Tapi, jika Anda masih belum puas telusuri GitHub untuk skrip modal terkait dan lihat apa lagi yang bisa Anda temukan.
