Ücretsiz JavaScript Modalları

JavaScript ’ te modallar ile özel animasyonlar oluşturabilir, UI girişi ekleyebilir ve gerçekten kullanıcı deneyimini ekleyebilirsiniz.

Bir JS kütüphanesini kullandığınızda 0’ dan tasarım yaparak zaman kaybetmeyin.Bu yazımızda en iyi ve en çok kullanılan ücretsiz JS modalarını listeledik.

Tamamı ücretsiz ve açık kaynaktır bu nedenle kodları düzenleyebilir ve kendi sitenize uygun şekilde kullanabilirsiniz.

Tingle

Serbest modsal komut dizilerinden birisi Tingle.js. Bağımlılığı olmayan “vanilla” kütüphanesi JavaScript üzerinde kurulu olduğu için herhangi bir jQuery veya Zepto kütüphanesine ihtiyacınız yok.

Ek olarak oldukça küçük bir kütüphane, ancak özelleştirme için çok seçeneğe sahip. CSS geçişlerini, JavaScript modal animasyonlarını ve tüm kullanıcı deneyimini yalnızca birkaç ayarla değiştirebilirsiniz.

Tingle.js, tamamen erişilebilir ve duyarlı olacak şekilde tasarlanmıştır, bu nedenle mobil cihazlarda çalışır ve eski tarayıcıları da desteklemektedir.

GitHub’ daki tüm belgeleri ve ücretsiz kaynak kodunu görebilirsiniz. Ayrıca bir demo bağlantısı var, bu nedenle web sitenize sığabilecek olup olmadığını görmek için Tingle’ı kontrol edebilirsiniz.

VanillaModal

Vanilla Modal, CSS geçişleri ile beraber modaliteye güç katan saf bir vanilla komutuyla adını tam anlamıyla yansıtıyor.

Bu modal oldukça küçük ve esnektir, özel CSS ile pencereler yeniden düzenlenebilir. Ayrıca, JavaScript ile değiştirebileceğiniz, DOM işlevlerini çalıştırmak veya hatta geri arama işlevleri için mükemmel bir seçim yapabileceğiniz pek çok seçenek vardır.

SweetAlert

Web tasarımının bu döneminde, özellikle de SweetAlert2 gibi komut dosyaları ile varsayılan tarayıcı uyarılarına ihtiyaç duymamaktayız.

Bu ücretsiz JavaScript kitaplığı sıfır bağımlılığı ile gelir ve yalnızca bir kalıcı pencere gibi çalışır. Bununla birlikte, kullanıcıdan Tamam / İptal girişlerini destekler, böylece bunları tasarlayabilir ve onları uyarı kutuları gibi kullanabilirsiniz.

Başka komuta gerek duymazsınız, bu nedenle SweetAlert2 oldukça hafif çalışır. Modalların gerçek bir web sayfasında nasıl göründüğünü görmek için demolara bir göz atın. SweetAlert2, şık modal uyarı kutuları için mükemmel bir çözümdür.

plainModal

JQuery üzerine kurulmuştur, ancak mevcut en küçük modsal komut dizelerinden biridir. Harici bir CSS veya resim dosyası kullanmaz. İhtiyacınız olan sadece bir JS script’ idir.

PlainModal komut dosyası sayfanıza ekledikten sonra, yalnızca modsal düğmeyi hedef alırsınız ve gidebilirsiniz. Bu size ekranı ve modal arayüzü ne kadar değiştirmek istediğinizi sağlar. Ek olarak bu eklentinin minimalist temasıyla uyumlu bir JavaScript satırı ile modsal ayarlayabilirsiniz.

Modaal

Modaal ile, sağlam bir “AA” erişilebilirlik derecesine sahip olan WCAG 2.0 testini geçen mükemmel deneyimi yaşarsınız. Ana sayfada bazı kod belgeleriyle harika bir örnek görebilirsiniz.

Genel olarak, erişilebilirliği gerçekten önemseyen herkes için bu vanilla JavaScript eklentisini öneriyorum. Bazı web projelerinde “AA “derecelendirmesi gerekli olabilir, bu nedenle Modaal yer imi koymak için kullanışlı bir komut dosyasıdır.

Scotch JS Modal

Scotch JS Modal, kodlayıcılar için öğreticiler ve kılavuzlar yayınlıyor. Scotch GitHub’ da yaptıkları çalışmaları paylaşıyorlar.

Modal Ken Wheeler tarafından geliştirildi ve nasıl çalıştığını öğrenmek istiyorsanız bu script bir öğreticiye sahip. Bununla birlikte, ücretsiz kod çoğu geliştirici için yeterli olmalı çünkü bu modal hafif ve kurulumu kolaydır.

Bootbox.js

Yeni bir web projesi başlatmanın en hızlı yolu Bootstrap’tır. Bootstrap’ daki yalnızca modal pencereler için tasarlanmış küçük bir JavaScript kitaplığı Bootbox.js’dir. Tamam veya İptal’i tıklatabileceği iletişim kutuları üzerinde çalışır.

Tipik JavaScript diyalog kutuları, uyarı kutuları gibi kötü görünür. Bootbox komut dosyası, BS3 ve BS4 ekosisteminde çalışan herkes için sağlam bir alternatif sunar.
Bootbox tamamen ücretsiz ve açık kaynaktır ve sizi hızlı bir şekilde çalıştırmak için uzun bir dokümantasyon sayfası vardır.

PicoModal

PicoModal, Vanilla JS’ de mükemmel çalışacak şekilde tasarlanmıştır. Android için mobil tarayıcılar ve iOS için Mobil Safari de dahil olmak üzere tüm modern tarayıcıları destekler. Hatta Explorer’ ın desteklediği IE tarayıcılarında da desteklenmektedir.

PicoModal’ ın geliştiricisi, nasıl çalıştığını göstermek için küçük bir JSfiddle script’ i oluşturdu. Bu küçük bir örnektir ve tıklama olaylarıyla bağlantısı yoktur ancak bu modal’ ı çalıştırmak için butonlara birkaç komut yazmak zor değil.

jQueryModal

JQuery Modal eklentisi, belki de şimdiye kadar bulacağınız en basit jQuery komut dosyasıdır. Çeşitli özniteliklere dayalı belirli HTML öğeleri ile otomatik olarak bağlanacak şekilde programlanabilir. Ayrıca, pencereyi kapatmak için ESC gibi klavye kısayollarını da destekler.

Toplamda, bu eklenti 1 KB’den daha küçüktür ve bütün tarayıcılarda çalışıyor. jQuery geliştiricileri ekstralar olmadan basit bir modsal komut dosyasına hızlı erişim için bu eklentiyi kaydetmelidir.

Bu yazımız da sizlere ücretsiz olarak kullanabileceğiniz JavaScript Modal’ larından bahsettik. Siz de düşüncelerinizi yorum kısmından bizimle paylaşabilirsiniz.