10 pluginuri gratuite pentru ferestre Modal JavaScript

Puteți găsi o mulțime de moduri CSS pure dar acestea nu oferă același control ca JavaScript. Cu un mod JavaScript JavaScript, puteți adăuga animații personalizate, intrări UI și îmbunătățiți cu adevărat experiența utilizatorilor.

Dar, de ce proiectați ceva de la zero când puteți utiliza o bibliotecă JS? Am colectat cele mai bune script-uri gratuite bazate pe JavaScript aici pentru a vă perfecționa și a evidenția preferințele dvs..

Toate astea sunt complet gratuit și open-source, astfel încât să puteți edita codul și să le restabiliți pentru a se potrivi site-ului dvs. după cum este necesar.

1. Tingle

Unul dintre scripturile mele modale gratuite este Tingle.js. este construit pe vanilla JavaScript fără dependențe, astfel încât să nu aveți nevoie de biblioteci jQuery sau Zepto.

În plus, este o bibliotecă destul de mică, deși nu există o mulțime de opțiuni pentru personalizare. Puteți modifica tranzițiile CSS, animațiile modale JavaScript și experiența întregului utilizator cu doar câteva setări.

Tingle.js este proiectat să fie pe deplin accesibile și receptive, astfel încât funcționează pe dispozitive mobile și acceptă și browsere mai vechi.

Poti sa vezi toată documentația despre GitHub, împreună cu codul sursă gratuit. Ei au, de asemenea, o legătură demo, astfel încât să puteți verificați Tingle în acțiune pentru a vedea dacă s-ar potrivi pe site-ul dvs..

2. Modalitatea de vanilie

Iată un mod pe care tocmai l-am găsit recent și este mult mai simplu decât majoritatea. Vanilă Modal este adevărat cu numele său cu pur scenariul de vanilie alimentând modal, împreună cu CSS tranziții.

Acest lucru este destul de mic și foarte flexibil, cu CSS personalizat pentru restabilirea ferestrelor. De asemenea are câteva opțiuni pe care le puteți modifica cu JavaScript, ceea ce îl face perfect pentru rularea funcțiilor DOM sau chiar a funcțiilor de apel invers.

Luați o privire la pagina demo pentru a vedea stilul implicit. Este un design de bază, așa că necesită personalizări pentru ao folosi pe un loc de producție. Dar acest lucru reduce, de asemenea, cerințele privind codul total, așa că este una dintre cele mai subtile biblioteci modale JavaScript.

3. plainModal

Dacă doriți un script foarte simplu, recomand foarte mult plainModal. Este construit pe jQuery, dar e unul dintre cele mai mici scripturi modale disponibile.

Da nu utilizați niciun CSS extern sau fișiere imagine. Doar un singur script JS este tot ce aveți nevoie.

Odată ce scriptul plainModal este adăugat la pagina dvs., pur și simplu vizați butonul modal și ești bine să pleci. Aceasta vă oferă controlul asupra afișajului și cât de mult doriți să modificați interfața modală.

În plus, poți configurați modal cu o linie de JavaScript ținând cont de tema minimalistă a acestui plugin.

4. Modal

Nu există nici o negare accesibilitatea este uriașă pe web. Scopul fiecărui proiectant ar trebui să fie a o experiență mai incluzivă pentru oameni din întreaga lume pe diverse dispozitive și cu posibile limitări.

Cu Modaal, veți obține acea experiență perfectă care trece testul WCAG 2.0 cu o notă solidă de accesibilitate AA. Puteți vedea un exemplu fantastic pe pagina principală, împreună cu o documentație a codului.

În general, recomand acest plugin de tip vanilla JavaScript pentru cineva care are grijă de accesibilitate. Ratingul AA poate fi solicitat pe unele proiecte web, astfel încât Modaal este un script foarte util pentru a păstra marcajul.

5. Scotch JS Modal

Echipa de dezvoltare de la Scotch.io publică tutoriale și ghiduri pentru coderi. Munca lor este incredibilă și arată într-adevăr acest script modal JavaScript, găzduit pe Scotch GitHub.

Modul a fost dezvoltat de Ken Wheeler și acest scenariu chiar are un tutorial complet dacă vrei să înveți cum funcționează. Cu toate acestea, codul gratuit ar trebui să fie suficient pentru majoritatea dezvoltatorilor, deoarece acesta este foarte ușor și ușor de configurat. Nu există dependențe și nici un exemplu de demo pe CodePen.

6. Bootbox.js

Cea mai rapidă cale spre lansați un nou proiect web este prin Bootstrap. Este un cadru frontal puternic care încurajează dezvoltatorii creați propriile add-on-uri la bibliotecă.

Un astfel de exemplu este Bootbox.js, o mică bibliotecă JavaScript, conceput exclusiv pentru ferestre modale în Bootstrap. De fapt funcționează pe casete de dialog unde utilizatorul poate face clic pe OK sau poate anula, pe baza solicitării dvs..

Dialogurile tipice JavaScript sunt îngrozitoare, la fel ca casetele de alertă. Scenariul Bootbox oferă o o alternativă solidă pentru oricine lucrează în ecosistemul BS3 / BS4.

Din nou, este total liber și open-source, împreună cu a documentație lungă să te ridici și să fugi repede.

7. iziModal.js

daca tu nevoie de o soluție ceva mai personalizat verifică iziModal.js. Acest instrument este pe deplin receptiv și proiectat să lucrează perfect în toate browserele moderne.

Am găsit încă un script modal care oferă un design plăcut din punct de vedere estetic. Se iese pe poarta cu a un interfață uimitoare care se poate amesteca în practic orice site web. Cu toate acestea, puteți de asemenea restyle design pentru a vă satisface nevoile.

Notați acest plugin rulează pe jQuery, deci este unul dintre puținele are o dependență. Dar, dacă doriți stilurile iziModal este un preț mic pentru a plăti pentru astfel de ferestre uimitoare popup.

8. JQuery Modal

jQuery Modal plugin este poate cel mai simplu script modal pe jQuery pe care îl veți găsi vreodată.

Poate fi programat să lega automat cu anumite elemente HTML bazat pe diferite atribute. De asemenea acceptă comenzile rapide de la tastatură cum ar fi ESC pentru închiderea ferestrei.

În total, acest plugin măsuri mai mici de 1KB si el funcționează în orice browser posibil pe care îl puteți imagina. Dezvoltatorii jQuery ar trebui să păstreze acest plugin salvat pentru acces rapid la un script modal simplu, fără buclele suplimentare.

9. PicoModal

Revenind la JavaScript de vanilie, avem Biblioteca PicoModal. Acesta este probabil unul dintre cele mai mici scripturi pe care le veți găsi și pe care le doriți rulați perfect pe o coloană vertebrală de vanilie JavaScript.

Aceasta suportă toate browserele moderne, inclusiv browserele mobile pentru Android și Mobile Safari pentru iOS. Suportă chiar și browserele IE vechi, datează din IE7!

Dezvoltatorul PicoModal a creat un mic script JSfiddle pentru a demonstra cum funcționează. Acesta este un exemplu foarte mic și este nu sunt legate de un eveniment de clic sau altceva, dar nu este greu script în câteva butoane de comutare pentru a rula corect fereastra modală.

10. Avgrund

Avgrund este probabil una dintre cele mai unice modale din această listă. Folosește a personalizat efect de fading pagină, împreună cu o animație în scădere să aducem în vedere modulul drept.

Nu toată lumea va aprecia această animație, așa că nu pot spune că acest script ar potrivi fiecărui site web. Dar, este a pur modalitate vanilie și este foarte ușor de configurat, cu doar un CSS și un fișier JavaScripte.

Uitați-vă la pagina demo pentru a vedea cum funcționează. Cu siguranță are un stil unic și este obligat să atragă atenția cu animațiile personalizate care funcționează.

Cuvintele finale

Indiferent de ce căutați, pariez că există ceva în această listă pentru a se potrivi nevoilor dvs. Dar, dacă încă nu sunteți mulțumit navigați prin GitHub pentru scripturile modale conexe și vezi ce mai puteți găsi.