10 Plugin Tetingkap Modal JavaScript Percuma

Awak boleh cari banyak maya CSS tulen tetapi ini tidak menawarkan kawalan yang sama seperti JavaScript. Dengan modal JavaScript, anda boleh menambah animasi adat, input UI, dan benar-benar meningkatkan pengalaman pengguna.

Tetapi, mengapa reka bentuk sesuatu dari awal anda boleh menggunakan perpustakaan JS? Saya telah mengumpul Skrip modal berkuasa JavaScript terbaik di sini untuk anda membaca dan memilih kegemaran anda.

Semua ini adalah sepenuhnya percuma dan sumber terbuka, jadi anda boleh mengedit kod itu dan mengubahnya agar sesuai dengan tapak anda.

1. Tingle

Salah satu skrip modal kegemaran saya ialah Tingle.js. Ia dibina di JavaScript vanila tanpa sebarang kebergantungan, jadi anda tidak memerlukan sebarang jQuery atau perpustakaan Zepto.

Plus, ia adalah perpustakaan yang agak kecil, walaupun ia ada banyak pilihan untuk penyesuaian. Anda boleh menukar peralihan CSS, animasi modal JavaScript, dan pengalaman pengguna keseluruhan dengan hanya beberapa tetapan.

Tingle.js direka untuk menjadi boleh diakses sepenuhnya dan responsif, jadi ia berfungsi pada peranti mudah alih dan menyokong pelayar lama juga.

Awak boleh lihat semua dokumentasi di GitHub, bersama-sama dengan kod sumber bebas. Mereka juga mempunyai pautan demo, jadi anda boleh semak Tingle dalam tindakan untuk mengetahui sama ada ia boleh muat di laman web anda.

2. Vanilla Modal

Berikut adalah modal yang baru saya temui baru-baru ini dan ia jauh lebih mudah daripada kebanyakan. Vanila Modal bertegas dengan namanya dengan a skrip vanila tulen menggerakkan modal, bersama dengan Peralihan CSS.

Perkara ini cukup kecil dan fleksibel, dengan CSS tersuai untuk mengubah suai tingkap. Ia juga mempunyai agak beberapa pilihan yang boleh anda ubah dengan JavaScript, menjadikannya sesuai untuk menjalankan fungsi DOM atau fungsi panggil balik.

Ambil mengintip di halaman demo untuk melihat gaya lalai. Ini reka bentuk yang sangat asas, jadi ia akan memerlukan penyesuaian untuk menggunakannya di tapak pengeluaran. Tetapi ini juga memotong jumlah keperluan kod, jadi itu salah satu perpustakaan modal JavaScript paling tipis.

3. plainModal

Jika anda mahukan skrip yang sangat mudah, saya sangat mengesyorkan plainModal. Ia adalah dibina di jQuery, tetapi ia salah satu skrip modal terkecil yang ada.

Ia berlaku tidak menggunakan fail CSS atau imej luaran. Hanya satu skrip JS sahaja yang anda perlukan.

Setelah script plainModal ditambahkan ke halaman anda, anda hanya sasarkan butang modal dan awak baik untuk pergi. Ini memberi anda kawalan ke atas paparan dan berapa banyak anda mahu mengubah antara muka modal.

Plus, anda boleh sediakan modal dengan satu baris JavaScript dengan tema minimalis plugin ini.

4. Modaal

Tidak dinafikan Kebolehcapaian adalah besar di web. Setiap matlamat pereka harus menjadi a pengalaman lebih inklusif untuk orang di seluruh dunia pada pelbagai peranti & dengan batasan yang mungkin.

Dengan Modaal, anda mendapat pengalaman yang sempurna itu lulus ujian WCAG 2.0 dengan penarafan akses AA yang kukuh. Anda boleh melihat contoh hebat di halaman utama, bersama dengan beberapa dokumentasi kod.

Secara keseluruhan, saya cadangkan plugin JavaScript vanila ini bagi sesiapa sahaja yang benar-benar mengambil berat tentang kebolehaksesan. Penarafan AA boleh diperlukan pada beberapa projek web, jadi Modaal adalah skrip yang sangat berguna untuk menyimpan bookmark.

5. Scotch JS Modal

Pasukan pembangunan di Scotch.io menyiarkan tutorial dan panduan untuk coders. Kerja mereka adalah luar biasa dan ia benar-benar menunjukkan dalam skrip modal JavaScript ini, yang dihoskan pada Scotch GitHub.

Mod ini dibangunkan oleh Ken Wheeler dan skrip ini juga mempunyai tutorial penuh jika anda ingin mengetahui cara kerjanya. Walau bagaimanapun, kod percuma sepatutnya cukup untuk kebanyakan pemaju kerana ini super ringan dan mudah untuk ditubuhkan. Tiada kebergantungan, dan juga demo sampel pada CodePen.

6. Bootbox.js

Cara terpantas untuk melancarkan projek web baru adalah melalui Bootstrap. Ia rangka kerja frontend yang kuat yang menggalakkan pemaju untuk buat sendiri add-ons ke perpustakaan.

Contohnya ialah Bootbox.js, perpustakaan kecil JavaScript, direka semata-mata untuk tingkap modal dalam Bootstrap. Ia sebenarnya berfungsi pada kotak dialog di mana pengguna boleh mengklik OK atau membatalkan, berdasarkan permintaan anda.

Dialog JavaScript biasa sangat mengerikan, sama seperti kotak amaran. Skrip Bootbox menawarkan a alternatif pepejal bagi sesiapa yang bekerja di ekosistem BS3 / BS4.

Sekali lagi, itu benar-benar bebas dan sumber terbuka, bersama dengan a halaman dokumentasi yang panjang untuk mendapatkan anda & berjalan pantas.

7. iziModal.js

Jika awak memerlukan penyelesaian yang lebih khusus semak iziModal.js. Alat ini adalah responsif sepenuhnya dan direka bentuk untuk kerja dalam semua pelayar moden dengan sempurna.

Saya masih belum menemui skrip modal lain yang menawarkan reka bentuk estetika yang menyenangkan. Ia keluar dari pintu dengan a UI cantik yang boleh digabungkan ke mana-mana laman web praktikal. Walau bagaimanapun, anda boleh juga restyle reka bentuk untuk memenuhi keperluan anda.

Hanya perhatikan plugin ini berjalan di jQuery, jadi ia adalah salah satu daripada beberapa di sini mempunyai pergantungan. Tetapi, jika anda mahu gaya iziModal itu adalah harga yang kecil untuk membayar tingkap popover yang licin.

8. jQuery Modal

The plugin jQuery Modal mungkin skrip modal paling mudah pada jQuery yang anda akan dapati.

Ia boleh diprogramkan secara automatik ikatan dengan elemen HTML tertentu berdasarkan pelbagai sifat. Ia juga menyokong pintasan papan kekunci seperti ESC untuk menutup tetingkap.

Secara keseluruhannya, plugin ini langkah kurang dari 1KB dan ia berfungsi dalam setiap penyemak imbas yang mungkin anda bayangkan. pemaju jQuery perlu memastikan pemalam ini disimpan untuk akses cepat ke skrip modal yang sederhana tanpa tambahan tambahan.

9. PicoModal

Kembali ke JavaScript vanila, kami ada Perpustakaan PicoModal. Ini mungkin salah satu skrip terkecil yang anda akan cari dan ia direka bentuk untuk berjalan dengan sempurna pada tulang belakang JavaScript vanila.

Ia menyokong semua pelayar moden, termasuk pelayar mudah alih untuk Android dan Mobile Safari untuk iOS. Ia juga menyokong pelayar IE yang lebih tua, sejak kembali ke IE7!

Pemaju PicoModal mencipta skrip JSfiddle kecil untuk menunjukkan bagaimana ia berfungsi. Ini adalah contoh yang sangat kecil dan ia tidak terikat pada acara klik atau apa-apa lagi, tetapi ia tidak sukar skrip dalam beberapa butang togol untuk menjalankan tetingkap modal ini dengan betul.

10. Avgrund

Avgrund mungkin salah satu modal paling unik dalam senarai ini. Ia menggunakan a kesan pudar halaman adat, bersama dengan animasi yang mengecut untuk membawa hak modal ke dalam pandangan.

Tidak semua orang akan menghargai animasi ini, jadi saya tidak dapat mengatakan naskah ini sesuai dengan setiap laman web. Tetapi, ia adalah modal vanila tulen dan ia sangat mudah untuk ditubuhkan, dengan hanya CSS dan fail JavaScripte.

Lihat sahaja halaman demo untuk melihat bagaimana ia berjalan. Ia sememangnya mendapat gaya yang unik terikat untuk menarik perhatian dengan animasi tersuai yang hanya berfungsi.

Kata-kata akhir

Tidak kira apa yang anda cari, saya pasti ada sesuatu dalam senarai ini untuk memenuhi keperluan anda. Tetapi, jika anda masih tidak berpuas hati semak melalui GitHub untuk skrip modal terkait dan lihat apa lagi yang anda boleh cari.