10 plugin per finestra modale JavaScript gratuiti

Potete trovare un sacco di pure modali CSS ma questi non offrono lo stesso controllo di JavaScript. Con un modal JavaScript, puoi aggiungere animazioni personalizzate, input dell'interfaccia utente e migliorare davvero l'esperienza utente.

Ma, perché progettare qualcosa da zero quando puoi usare una libreria JS? Ho raccolto il migliori script modali gratuiti basati su JavaScript qui per voi per esaminare e individuare i tuoi preferiti.

Tutti questi sono completamente gratuito e open-source, in modo che tu possa modificare il codice e renderlo nuovamente adattato al tuo sito secondo necessità.

1. Tingle

Uno dei miei script modali gratuiti preferiti è Tingle.js. Suo costruito su JavaScript vaniglia senza dipendenze, quindi non hai bisogno di librerie jQuery o Zepto.

Inoltre, è una libreria abbastanza piccola, anche se ha un sacco di opzioni per la personalizzazione. Puoi modificare le transizioni CSS, le animazioni modali JavaScript e l'intera esperienza utente con solo alcune impostazioni.

Tingle.js è progettato per essere completamente accessibile e reattivo, quindi funziona su dispositivi mobili e supporta anche i browser più vecchi.

Puoi vedere tutta la documentazione su GitHub, insieme al codice sorgente gratuito. Hanno anche un collegamento demo, quindi puoi controlla Tingle in azione per vedere se potrebbe adattarsi al tuo sito web.

2. Vanilla Modal

Ecco un modal che ho appena trovato di recente ed è molto più semplice della maggior parte. Vaniglia modale è fedele al suo nome con a puro script di vaniglia alimentando il modale, insieme a Transizioni CSS.

Questa cosa è abbastanza piccola e super flessibile, con CSS personalizzato per restyling delle finestre. Ha anche alcune opzioni che puoi modificare con JavaScript, rendendolo perfetto per l'esecuzione di funzioni DOM o anche funzioni di callback.

Dai un'occhiata al pagina demo per vedere lo stile predefinito. È un design davvero di base, quindi lo sarà richiedere le personalizzazioni per usarlo su un sito di produzione. Ma questo riduce anche i requisiti del codice totale, quindi è così una delle librerie modali JavaScript più sottili.

3. plainModal

Se vuoi uno script davvero semplice, lo consiglio vivamente plainModal. È costruito su jQuery, ma è uno dei più piccoli script modali disponibili.

Lo fa non utilizzare alcun file CSS o immagine esterno. È sufficiente un solo script JS.

Una volta che lo script plainModal viene aggiunto alla tua pagina, devi farlo bersaglio il pulsante modale e sei a posto. Questo ti consente di controllare il display e quanto vuoi modificare l'interfaccia modale.

Inoltre, puoi imposta il modale con una riga di JavaScript mantenendo il tema minimalista di questo plugin.

4. Modaal

Non si può negare l'accessibilità è enorme sul web. L'obiettivo di ogni designer dovrebbe essere a esperienza più inclusiva per persone in tutto il mondo su vari dispositivi e con possibili limitazioni.

Con Modaal, ottieni quell'esperienza perfetta che supera il test WCAG 2.0 con un rating di accessibilità AA solido. Puoi vedere un fantastico esempio sulla pagina principale, insieme ad alcuni documenti sul codice.

Nel complesso, consiglio questo plug-in JavaScript di vaniglia per chiunque si preoccupi veramente dell'accessibilità. Il rating AA può essere richiesto su alcuni progetti web, quindi Modaal è uno script davvero utile da tenere tra i preferiti.

5. Scotch JS Modal

Il team di sviluppo di Scotch.io pubblica tutorial e guide per i programmatori. Il loro lavoro è incredibile e mostra davvero dentro questo script modale JavaScript, ospitato sullo Scotch GitHub.

Il modale è stato sviluppato da Ken Wheeler e anche questo script ha un tutorial completo se vuoi imparare come funziona Tuttavia, il codice gratuito dovrebbe essere sufficiente per la maggior parte degli sviluppatori poiché questo è super leggero e facile da configurare. Nessuna dipendenza e persino una demo di esempio su CodePen.

6. Bootbox.js

Il modo più veloce per lanciare un nuovo progetto web è attraverso Bootstrap. È un potente frontend framework che incoraggia gli sviluppatori a farlo crea i propri componenti aggiuntivi nella libreria.

Uno di questi è Bootbox.js, una piccola libreria JavaScript, progettato esclusivamente per Windows modale in Bootstrap. In realtà funziona su finestre di dialogo dove l'utente può fare clic su OK o annullare, in base alla richiesta.

Le tipiche finestre di dialogo JavaScript sono orribili, proprio come le finestre di avviso. Lo script Bootbox offre a solida alternativa per chiunque lavori nell'ecosistema BS3 / BS4.

Di nuovo, lo è totalmente gratuito e open-source, insieme a a lunga pagina di documentazione per farti funzionare velocemente.

7. iziModal.js

Se tu serve una soluzione un po 'più personalizzata check-out iziModal.js. Questo strumento è pienamente reattivo e progettato per funziona perfettamente in tutti i browser moderni.

Devo ancora trovare un altro copione modale che offre un design esteticamente gradevole. Viene fuori il cancello con a splendida interfaccia utente che può integrarsi praticamente in qualsiasi sito web. Tuttavia, puoi Rinnova anche il design per soddisfare le tue esigenze.

Basta notare questo plugin funziona su jQuery, quindi è uno dei pochi qui ha una dipendenza. Ma se vuoi gli stili odiModal è un piccolo prezzo da pagare per finestre windows popover così eleganti.

8. jQuery Modal

Il plugin modale jQuery è forse il lo script modale più semplice su jQuery che tu abbia mai trovato.

Può essere programmato per legare automaticamente con determinati elementi HTML basato su vari attributi. Anche supporta le scorciatoie da tastiera come ESC per chiudere la finestra.

In totale, questo plugin misura meno di 1 KB ed esso funziona in tutti i browser che puoi immaginare. Gli sviluppatori di jQuery dovrebbero conservare questo plugin salvato per un accesso rapido a un semplice script modale senza extra fronzoli.

9. PicoModal

Tornando verso vanilla JavaScript, abbiamo il Libreria PicoModal. Questo è probabilmente uno dei più piccoli script che troverai ed è progettato per funziona perfettamente su un backbone JavaScript vaniglia.

esso supporta tutti i browser moderni, compresi i browser mobili per Android e Mobile Safari per iOS. Supporta anche i browser IE più vecchi, risalenti a IE7!

Sviluppatore di PicoModal creato un piccolo script JSfiddle per dimostrare come funziona Questo è un esempio molto piccolo ed è non legato a un evento click o altro, ma non è difficile da script in alcuni pulsanti di attivazione / disattivazione per eseguire correttamente questa finestra modale.

10. Avgrund

Avgrund è probabilmente uno dei più modali in questo elenco. Usa a effetto dissolvenza pagina personalizzata, insieme a un'animazione restringente per rendere visibile la modale.

Non tutti apprezzeranno questa animazione, quindi non posso dire che questo script si adatti a tutti i siti web. Ma è un modale di pura vaniglia ed è super facile da configurare, con solo un CSS e un file JavaScripte.

Dai un'occhiata al pagina demo per vedere come funziona Ha sicuramente uno stile unico ed è destinato ad attirare l'attenzione con le animazioni personalizzate che funzionano.

Parole finali

Non importa quello che stai cercando, scommetto che c'è qualcosa in questa lista per soddisfare le tue esigenze. Ma se non sei ancora soddisfatto sfogliare GitHub per gli script modali correlati e vedi cos'altro puoi trovare.