Siteniz İçin 12 Ücretsiz Modal Pencere Kitaplığı ve Eklentisi

Tarayıcı uyarıları sadece düz sinir bozucu. Hiç kimse onları sevmedi. Ama kalıcı pencereler gelene kadar elimizdeki tek şey buydu.

Bugün sahip olduğumuz hızla gelişen JavaScript teknikleri ve ayrıca devasa açık kaynak topluluğu sayesinde, bir çırpıda temiz kalıcı pencereler kurabilirsiniz.

Bu gönderi için, aralarından seçim yapabileceğiniz çeşitli özellikler ve stiller içeren en iyi ücretsiz modal pencere eklentileri arasından en iyi seçimlerimi paylaştım.

1. jQuery Modalı

Süper temiz ve kullanımı basit bir şey mi arıyorsunuz? O zaman jQuery Modal, başvuracağınız kaynağınız olmalıdır.

Bu erişilebilir eklenti, klavye kısayollarıyla (kapatmak için ESC) çalışır ve hatta dokunma eylemlerini destekler. Toplam kitaplık, süper küçük olan yaklaşık 1 KB ağırlığındadır.

Gerçek tasarımın herhangi bir web sitesinde çalışacak kadar temiz olduğundan bahsetmiyorum bile. Süper temiz bir UX için kesinlikle favorilerimden biri.

2. yalın Modal

yalınModal jQuery eklentisi, tıpkı jQuery Modal eklentisi gibi çok benzer bir "temiz" tasarıma sahiptir.

Her ikisi de benzer görünüyor ve benzer bir deneyim sunuyor. Ancak yalınModal, özel animasyon efektleri ve daha teknik içerik için API geri çağrılarını desteklediği için öne çıkıyor.

Her iki kitaplık da hafiftir ve ikisi de jQuery üzerinde çalışır. Benim düşünceme göre, her iki şekilde de yanlış gidemezsiniz.

3. iziModal.js

Modal tasarımın daha karmaşık tarafına girerken iziModal.js'ye sahibiz.

Bu kesinlikle daha büyük bir eklentidir ve estetik açıdan çok daha fazlası ile birlikte gelir. Oturum açma/kayıt formları arasında geçiş yapmak için aşağı kaydırma efektleri, solma efektleri ve hatta sekmeli modlarla düzinelerce animasyonu destekler.

iziModal, temiz tasarımı ve harika UI/UX efektleri nedeniyle kişisel bir favoridir.

Ancak, kurulumu biraz daha tekniktir ve daha önemli bir dosya boyutuyla gelir. Bu şeylerin ötesine bakabilirseniz, deneyime bayılacaksınız.

4. ARIA Modalı

W3'ün WAI-ARIA kısaltması uzun ve kafa karıştırıcı. Daha erişilebilir bir web için zengin deneyimleri nasıl ele almanız gerektiğini gerçekten tanımlar.

Çok az kalıcı pencere erişilebilirlik göz önünde bulundurularak tasarlanmıştır. Ancak ARIA Modal jQuery eklentisi bulduğum en iyisi.

Sık güncellemeler alır ve tüm girişler için tüm cihazlarda, tüm tarayıcılarda çalışmalıdır (tıklayın ve dokunun).

Tek sorun, erişilebilirlik odaklı eklentilerin tipik olarak biraz "çirkin" olmasıdır.

Estetikten çok erişilebilirlikle ilgileniyorsanız, bu mükemmel olacaktır.

5. Tadilat

Remodal komut dosyası hız için tasarlanmıştır. CSS animasyonlarının üzerinde çalışır ve süper küçük bir jQuery betiği üzerinde çalışır.

Ancak, Remodal ile ilgili küçük bir sorun var: artık geliştirici tarafından desteklenmiyor.

GitHub deposunda daha fazlasını okuyabilirsiniz, ancak bu eklenti, biri kodu çatallamadıkça sonsuza kadar v1.0'da kalacaktır. Yine de, herhangi bir güvenlik riski oluşturması muhtemel olmayan kullanılabilir bir eklenti olduğunu düşünüyorum.

6. Fantezi Kutu

Teknik olarak tam bir "modal" komut dosyası olmasa da, modsal davranışı taklit ettiği için FancyBox'ı gerçekten dahil etmek istiyorum.

FancyBox eklentisi jQuery üzerinde çalışır ve küçük resimler listesinden kalıcı bir slayt gösterisi galerisi oluşturur. Tipik olarak bulduğunuz gibi kalıcı uyarı kutuları oluşturmanıza izin vermez, bu nedenle doğrudan kalıcı bir pencere eklentisi değildir.

Ancak, görüntü slayt gösterisi ışık kutusu gerçek bir kalıcı pencere gibi hissettirdiği için başka bir kalıcı komut dosyasıyla bir sayfada güzel bir şekilde karışacaktır.

7. animasyonluModal.js

animasyonModal.js, sayfada yalnızca küçük bir alan yerine tüm ekranı kapladığı için benzersizdir.

Aradığınız şey bu olmayabilir ve bu tamamen sorun değil! Bu stilize modeli beğendim çünkü kolay giden bir tasarıma ve devasa bir animasyon efektleri kitaplığına (ayrıca bunları özelleştirmek için bir API'ye) sahip.

Ancak büyük tam ekran efektini aşmak yok, bu yüzden bu sadece bu stili seven geliştiriciler için işe yarayacak.

8. Basit Modal

SimpleModal betiği ile güzel bir estetik ve kullanılabilirlik dengesi bulacaksınız. Modal pencereler çok doğal hissettiriyor ancak çılgın animasyonlara veya uzun JS'ye dayanmıyor.

Ana sayfada, gömülü videolardan resimlere, özel içeriğe, onay/iptal modellerine, oturum açma alanlarına ve çok daha fazlasına kadar her şeyi içeren örnekler bulacaksınız.

Kesinlikle özelleştirme için bolca alana sahip çok yönlü bir modal komut dosyası.

9. Avgrund Modalı

Benim için gerçekten göze çarpan senaryolar, farklı bir şey yapanlar. Avgrund Modal bu komut dosyalarından biridir.

Bu modu etkinleştirdiğinizde, animasyon tüm sayfayı arka plana taşır. Bu, her web sitesinde çalışacak bir şey değil. Ama süper benzersiz ve izlemesi oldukça ilginç.

jQuery üzerinde çalışır, tüm modern tarayıcıları destekler ve IE6+'a kadar uzanan eski tarayıcılar için doğal geri dönüşler sunar.

10. popModalı

popModal sayfasına bir göz atın ve bu şeyin neden bu kadar popüler olduğunu göreceksiniz. popModal ile uzun kayan metinleri, onaylama/iptal etme düğmelerini ve hatta basit bildirim mesajlarını destekleyen özel pencereler tasarlayabilirsiniz.

Tüm CSS kodlarını düzenlemek son derece kolaydır ve size tasarım üzerinde tam kontrol sağlar.

Animasyon stilini sevmiyorum ama kesinlikle korkunç değil. Bence popModal, animasyonlarla doğal olarak uyum sağlayan sitelerde en iyi sonucu veriyor.

11. Tatlı Uyarı2

İşte web'deki en sevdiğim uyarı komut dosyalarından biri: SweetAlert2.

Sıfır bağımlılığa sahip bir Vanilla JS kitaplığıdır ve WAI-ARIA standartlarına göre tamamen erişilebilirdir. Ana sayfayı kontrol ederseniz, aslında geleneksel bir uyarı kutusunu SweetAlert modeliyle karşılaştırabilirsiniz.

Fark gece ve gündüz gibidir.

12. rmodal.js

Ele aldığım kitaplıkların çoğu jQuery'ye güveniyor. Ancak, tüm bağımlılıklardan tamamen arınmış, kullanabileceğiniz bazı modsal komut dosyaları vardır (yukarıdaki SweetAlert2 bunlardan biridir).

rmodal.js, herhangi bir siteye sığabilecek doğal bir modal pencere tasarımı sunar. Herhangi bir JS kitaplığına güvenmiyor ve oldukça küçük, toplam 1.2KB küçültülmüş.

Bunu bir BS3/BS4 düzeniyle birleştirmeyi düşünüyorsanız, Bootstrap ile de güzel oynayabilir.

Ancak rmodal'ın tarayıcıda nasıl çalıştığını görmek için örnek önizlemeye bir göz atın. Herkesi memnun etmeyecek ama bağımlılıktan arınmış bir betik için güzel bir seçim.