10 darmowych wtyczek modalnych okien JavaScript

Możesz znaleźć mnóstwo czystych modów CSS ale te nie oferuj takiej samej kontroli jak JavaScript. Dzięki modalowi JavaScript możesz dodawać niestandardowe animacje, wejścia interfejsu użytkownika i naprawdę poprawiać komfort użytkowania.

Ale po co projektować coś od podstaw, kiedy możesz użyć biblioteki JS? Zebrałem najlepsze darmowe skrypty modalne obsługiwane przez JavaScript tutaj, abyś mógł przeglądać i wyróżnić swoje ulubione.

Wszystkie są całkowicie darmowy i open-source, dzięki czemu możesz edytować kod i modyfikować go, aby dopasować go do witryny w razie potrzeby.

1. Tingle

Jednym z moich ulubionych darmowych skryptów modalnych jest Tingle.js. Jego zbudowany na waniliowym JavaScript bez zależności, więc nie potrzebujesz żadnych bibliotek jQuery lub Zepto.

Poza tym jest to dość mała biblioteka, chociaż ma wiele opcji dostosowywania. Możesz zmienić przejścia CSS, animacje modalne JavaScript i całe doświadczenie użytkownika za pomocą kilku ustawień.

Tingle.js ma być w pełni dostępny i elastyczny, więc działa na urządzeniach mobilnych i obsługuje również starsze przeglądarki.

Możesz zobaczyć cała dokumentacja na GitHub, wraz z bezpłatnym kodem źródłowym. Mają także łącze demo, więc możesz sprawdź Tingle w akcji aby sprawdzić, czy pasuje do Twojej witryny.

2. Waniliowy Modal

Oto modal, który niedawno znalazłem i to jest dużo prostsze niż większość. Waniliowy Modal jest wierny swojej nazwie za pomocą czysty skrypt waniliowy zasilać modal wraz z Przejścia CSS.

Ta rzecz jest dość mała i bardzo elastyczna niestandardowy CSS do zmiany wyglądu okien. To także ma sporo opcji można zmienić za pomocą JavaScript, czyniąc go idealnym do uruchamiania funkcji DOM lub nawet funkcji zwrotnych.

Rzuć okiem na strona demonstracyjna aby zobaczyć domyślny styl. To naprawdę podstawowy projekt, więc będzie wymagać dostosowania, aby używać go w miejscu produkcji. Ale to również zmniejsza całkowite wymagania dotyczące kodu, więc jest jedna z najcieńszych bibliotek modalnych JavaScript.

3. plainModal

Jeśli chcesz naprawdę prosty skrypt, bardzo polecam plainModal. To jest zbudowany na jQuery, ale to jest jeden z najmniejszych dostępnych skryptów modalnych.

To robi nie używaj żadnych zewnętrznych plików CSS ani obrazów. Wystarczy jeden pojedynczy skrypt JS.

Po dodaniu skryptu plainModal do twojej strony naciskaj przycisk modalny i dobrze jest iść. To daje ci kontrolę nad wyświetlaczem i ile chcesz zmienić modalny interfejs.

Plus możesz skonfiguruj modal za pomocą jednej linii JavaScript zgodnie z minimalistycznym motywem tej wtyczki.

4. Modaal

Nie ma wątpliwości dostępność jest ogromna w sieci. Cel każdego projektanta powinien być celem bardziej integrujące doświadczenie dla ludzi na całym świecie na różnych urządzeniach i z możliwymi ograniczeniami.

Z Modaal, masz takie doskonałe doświadczenie, które przechodzi test WCAG 2.0 z solidną oceną dostępności AA. Możesz zobaczyć fantastyczny przykład na stronie głównej wraz z dokumentacją kodu.

Ogólnie polecam tę waniliową wtyczkę JavaScript dla każdego, kto naprawdę dba o dostępność. Ocena AA może być wymagana w niektórych projektach internetowych, więc Modaal jest naprawdę przydatnym skryptem do przechowywania zakładek.

5. Scotch JS Modal

Zespół programistów w Scotch.io publikuje samouczki i przewodniki dla programistów. Ich praca jest niesamowita i naprawdę się pokazuje ten skrypt modalny JavaScript, obsługiwany przez Scotch GitHub.

Modal został opracowany przez Kena Wheelera i nawet ten skrypt ma pełny samouczek jeśli chcesz się dowiedzieć, jak to działa. Jednak darmowy kod powinien być wystarczający dla większości programistów, ponieważ tak jest super lekki i łatwy w konfiguracji. Brak zależności, a nawet przykładowe demo na CodePen.

6. Bootbox.js

Najszybszy sposób na uruchomić nowy projekt internetowy jest przez Bootstrap. Jest to potężny framework frontendowy, który zachęca programistów do utwórz własne dodatki do biblioteki.

Jednym z takich przykładów jest Bootbox.js, mała biblioteka JavaScript, przeznaczony wyłącznie do okien modalnych w Bootstrap. Właściwie to działa na oknach dialogowych gdzie użytkownik może kliknąć OK lub anulować, w zależności od żądania.

Typowe okna dialogowe JavaScript są okropne, podobnie jak pola alertów. Skrypt Bootbox oferuje solidna alternatywa dla każdego, kto pracuje w ekosystemie BS3 / BS4.

Znowu to jest całkowicie darmowy i open-source, wraz z długa strona dokumentacji szybko i szybko.

7. iziModal.js

Jeśli ty potrzebujesz rozwiązania trochę bardziej dostosowanego sprawdzić iziModal.js. To narzędzie jest w pełni responsywny i zaprojektowane do działa idealnie we wszystkich nowoczesnych przeglądarkach.

Jeszcze nie znalazłem innego modalnego skryptu, który oferuje tak estetyczny wygląd. Wychodzi z bramy za pomocą wspaniały interfejs użytkownika, który można połączyć z praktycznie każdą stroną internetową. Jednak możesz również przeprojektować projekt do własnych potrzeb.

Zwróć uwagę na tę wtyczkę działa na jQuery, więc jest to jeden z niewielu tutaj ma zależność. Ale jeśli chcesz stylów iziModal, to niewielka cena za takie eleganckie okna popover.

8. jQuery Modal

The Wtyczka modalna jQuery jest może najprostszy skrypt modalny na jQuery, jaki kiedykolwiek znajdziesz.

Można go zaprogramować na automatycznie wiąże się z niektórymi elementami HTML w oparciu o różne atrybuty. To także obsługuje skróty klawiaturowe takie jak ESC do zamykania okna.

W sumie ta wtyczka mierzy mniej niż 1 KB i to działa w każdej możliwej przeglądarce, jaką możesz sobie wyobrazić. Programiści jQuery powinni zachować tę wtyczkę w celu szybkiego dostępu do prostego skryptu modalnego bez dodatkowych dodatków.

9. PicoModal

Wracając do waniliowego JavaScript, mamy Biblioteka PicoModal. Jest to prawdopodobnie jeden z najmniejszych skryptów, które znajdziesz i jest przeznaczony do działa idealnie na waniliowym kręgosłupie JavaScript.

To obsługuje wszystkie nowoczesne przeglądarki, w tym przeglądarki mobilne na Androida i Mobile Safari na iOS. Obsługuje nawet starsze przeglądarki IE, sięgające IE7!

Programista PicoModal stworzył mały skrypt JSfiddle aby pokazać, jak to działa. To bardzo mały przykład nie jest związany z wydarzeniem typu „kliknij” lub czymkolwiek innym, ale nie jest to trudne skrypt w kilku przełącznikach aby poprawnie uruchomić to okno modalne.

10. Niezłomny

Ślepy jest prawdopodobnie jednym z najbardziej unikalnych modów na tej liście. Używa niestandardowy efekt zanikania strony, wraz z kurczącą się animacją aby pokazać modalne prawo.

Nie wszyscy docenią tę animację, więc nie mogę powiedzieć, że ten skrypt pasowałby do każdej strony. Ale to jest czysty modal waniliowy i jest bardzo łatwy w konfiguracji, tylko z CSS i filtrem JavaScriptmi.

Spójrz na strona demonstracyjna aby zobaczyć, jak działa. Z pewnością ma wyjątkowy styl i jest musi przyciągnąć uwagę z niestandardowymi animacjami, które po prostu działają.

Ostatnie słowa

Bez względu na to, czego szukasz, założę się, że na tej liście jest coś, co odpowiada Twoim potrzebom. Ale jeśli nadal nie jesteś zadowolony przeglądaj GitHub pod kątem powiązanych skryptów modalnych i zobacz, co jeszcze możesz znaleźć.