10 Ücretsiz JavaScript Modal Pencere Eklentileri

Bulabilirsin bol miktarda saf CSS modası ama bunlar JavaScript ile aynı kontrolü sunma. Bir JavaScript modeliyle, özel animasyonlar, kullanıcı arabirimi girişleri ekleyebilir ve kullanıcı deneyimini gerçekten geliştirebilirsiniz.

Ama neden sıfırdan bir şey tasarlarsan JS kütüphanesini kullanabilirsiniz? Topladım En iyi ücretsiz JavaScript destekli modal script favorilerinizi incelemek ve ayırmak için buradasınız.

Bunların hepsi tamamen ücretsiz ve açık kaynaklı, Böylece, kodu düzenleyebilir ve gerektiği gibi sitenize uyması için bunları kısıtlayabilirsiniz.

1. Tingle

En sevdiğim ücretsiz model senaryolardan biri Tingle.js. Onun bağımlılığı olmayan vanilya JavaScript'i temel al, yani herhangi bir jQuery veya Zepto kütüphanesine ihtiyacınız yok.

Ayrıca, oldukça küçük bir kütüphane olmasına rağmen özelleştirme için birçok seçenek. 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ı, mobil cihazlarda çalışır ve eski tarayıcıları da destekler.

Görebilirsin GitHub hakkındaki tüm belgeler, ücretsiz kaynak kodu ile birlikte. Ayrıca bir demo bağlantısına sahipler. Tingle'ı iş başında görün web sitenize uygun olup olmadığını görmek için.

2. Vanilya Modal

İşte son zamanlarda bulduğum bir model. çoğundan daha basit bir sürü. Vanilya Modal adına sadık kalıyor saf vanilya betiği modal ile güçlendirme CSS geçişleri.

Bu şey, oldukça küçük ve süper esnek Windows restyle için özel CSS. Ayrıca .... sahip JavaScript ile değiştirebileceğiniz epeyce seçenek, DOM işlevlerini çalıştırmak ve hatta geri arama işlevlerini çalıştırmak için mükemmeldir.

Bir göz atın demo sayfası Varsayılan stili görmek için Bu gerçekten basit bir tasarım, bu yüzden olacak Bir üretim sitesinde kullanmak için özelleştirmeler gerektirir. Fakat bu aynı zamanda toplam kod gereksinimlerini de azaltır, en ince JavaScript mod kütüphanelerinden biri.

3. plainModal

Gerçekten basit bir senaryo istiyorsanız çok tavsiye ederim plainModal. Bu jQuery üzerine inşa, ama o mevcut en küçük modal komut dosyalarından biri.

Yapar harici bir CSS veya resim dosyası kullanmayın. Tek bir JS komut dosyası ihtiyacınız olan tek şey.

PlainModal betiği sayfanıza eklendiğinde, kalıcı düğmeyi hedefle ve gitmekte iyisin. Bu, ekran üzerinde kontrolünüzü ve modal arayüzünü ne kadar değiştirmek istediğinizi belirtir.

Artı, yapabilirsin modal bir JavaScript satırı ile ayarlayın bu eklentinin minimalist temasını koruyarak.

4. Modaal

İnkar etmek yok erişilebilirlik web'de çok büyük. Her tasarımcının hedefi bir olmalı daha kapsamlı bir deneyim Dünyanın her yerindeki insanlar için çeşitli cihazlarda ve olası sınırlamalarla.

İle Modaal, o mükemmel deneyimi elde edersiniz ki WCAG 2.0 testini başarılı bir AA erişilebilirlik derecesiyle geçti. Bazı kod belgelerinin yanı sıra ana sayfada harika bir örnek görebilirsiniz.

Genel olarak, bu vanilya JavaScript eklentisini öneririm Erişilebilirliği gerçekten önemseyen herkes için. Bazı web projelerinde AA derecesi gerekebilir, bu yüzden Modaal yer imini tutmak için gerçekten kullanışlı bir komut dosyasıdır.

5. Scotch JS Modal

Scotch.io'daki geliştirme ekibi kodlayıcılar için rehberler ve rehberler yayınlamaktadır. İşleri inanılmaz ve gerçekten gösteriyor Scotch GitHub'da barındırılan bu JavaScript kalıcı komut dosyası.

Modal Ken Wheeler tarafından geliştirilen ve bu senaryo bile tam bir öğreticiye sahip nasıl çalıştığını öğrenmek istiyorsanız. Ancak, ücretsiz kod çoğu geliştirici için yeterli olmalıdır, çünkü süper hafif ve kurulumu kolay. Bağımlılık yok, hatta CodePen'de örnek bir demo.

6. Bootbox.js

En hızlı yol yeni bir web projesi başlatmak Bootstrap ile yapılır. Geliştiricileri teşvik eden güçlü bir önyüz çerçevesi kütüphaneye kendi eklentilerini yarat.

Böyle bir örnek Bootbox.js, küçük bir JavaScript kütüphanesi, Bootstrap'ta sadece kalıcı pencereler için tasarlanmıştır. Aslında iletişim kutuları üzerinde çalışıyor kullanıcının isteğine bağlı olarak Tamam veya iptal düğmesini tıklatabileceği yer.

Tipik JavaScript diyalogları tıpkı uyarı kutuları gibi berbattır. Bootbox komut dosyası bir BS3 / BS4 ekosisteminde çalışan herkes için güçlü bir alternatif.

Yine, bu tamamen ücretsiz ve açık kaynak, ile birlikte uzun dokümantasyon sayfası seni ayağa kaldırmak ve hızlı koşma.

7. iziModal.js

Eğer sen biraz daha özelleştirilmiş bir çözüme ihtiyacım var Çıkış yapmak iziModal.js. Bu araç tamamen duyarlı ve için tasarlanmış tüm modern tarayıcılarda kusursuzca çalışın.

Estetik açıdan hoş bir tasarım sunan başka bir model senaryo bulamadım. Bir ile kapıdan çıkar hemen hemen herhangi bir web sitesine karışabilir muhteşem UI. Ancak, yapabilirsiniz ayrıca tasarım restyle ihtiyaçlarınızı karşılamak için.

Sadece bu eklentiyi not edin jQuery üzerinde çalışır, bu yüzden burada az sayıda biridir bir bağımlılığı var. Ancak, iziModal stillerini istiyorsanız, böyle şık popover pencereler için ödemek için küçük bir fiyat.

8. jQuery Modal

jQuery Modal eklentisi belki de jQuery'de bulabileceğiniz en basit modal betiği.

Programlanabilir belirli HTML öğelerine otomatik olarak bağlan çeşitli özelliklere göre. O da klavye kısayollarını destekler pencereyi kapatmak için ESC gibi.

Toplamda, bu eklenti 1 KB'den daha düşük önlemler ve o hayal edebileceğiniz her tarayıcıda çalışır. jQuery geliştiricileri bu eklentiyi, basit bir modal betiğe ekstra erişim olmadan hızlı erişim için saklamalı.

9. PicoModal

Vanilya JavaScript'e geri dönersek, PicoModal kütüphanesi. Bu muhtemelen bulacağınız en küçük senaryolardan biridir ve mükemmel bir vanilya JavaScript omurgasında koşmak.

O tüm modern tarayıcıları destekler, Android için mobil tarayıcılar ve iOS için Mobil Safari dahil. IE7'ye dayanan daha eski IE tarayıcılarını bile destekliyor!

PicoModal'ın geliştiricisi küçük bir JSfiddle betiği oluşturdu Nasıl çalıştığını göstermek için. Bu çok küçük bir örnek ve bu bir tıklama etkinliğine veya başka bir şeye bağlı değil, ama zor değil birkaç geçiş düğmesinde komut dosyası bu kalıcı pencereyi düzgün çalıştırmak için.

10. Avgrund

Avgrund Muhtemelen bu listedeki en eşsiz modellerden biri. Kullanır küçülen bir animasyonla birlikte özel sayfa solma efekti modal hakkını görmek için.

Bu animasyonu herkes takdir etmeyecek, bu yüzden bu komut dosyasının her web sitesine uygun olduğunu söyleyemem. Ama, bu bir saf vanilya modal ve kurulumu çok kolay, Sadece bir CSS ve bir JavaScript fil ilee.

Bir göz atın demo sayfası Nasıl çalıştığını görmek için. Kesinlikle eşsiz bir tarzı var ve dikkatini çekmek için bağlı sadece işe yarayan özel animasyonlarla.

Son sözler

Ne aradığınız önemli değil, iddiaya girerim bu listede ihtiyaçlarınızı karşılayacak bir şey vardır. Ancak, hala memnun değilseniz ilgili modal komut dosyaları için GitHub'a göz atın ve başka ne bulabilirsin.