Crea, controlla e personalizza la finestra modale migliore per il tuo sito usando Vex

Una finestra modale è molto utile quando vuoi far interagire gli utenti con il tuo sito . Occasionalmente, una finestra modale viene chiamata casella modale mentre la finestra viene utilizzata per visualizzare la finestra di dialogo . In un precedente articolo ti abbiamo guidato attraverso un tutorial su come creare finestre modali usando il Plugin Bootstrap.

In questo post ti presenteremo un altro grande aiuto per la creazione di finestre modali, utilizzando la libreria jQuery, ovvero Vex .

Vex è una libreria Javascript completa e altamente personalizzabile che ti aiuta a creare finestre modali con facilità. Questo leggero plug-in jQuery sostituisce la finestra di dialogo nativa del browser.

Impostazione di base

Per prima cosa, dobbiamo preparare lo script Vex. Potete scaricarlo qui. Quindi, includi l'ultima versione di jQuery nell'intestazione con il seguente script.

Per usare Vex, devi includere i file vex.js e vex.css . Piuttosto che usare vex.js e vex.dialog.js, puoi semplicemente includere vex.combined.js o vex.combined.min.js .

Ora, aggiungeremo quelle librerie Vex all'intestazione in questo modo.

Nello script sopra, includo vex-theme-os.css che è un tema Vex pronto per l'uso diverso. Per usare un altro tema, puoi vedere la documentazione inclusa con la demo qui.

Applicando Vex

I metodi più basilari di Vex sono vex.dialog.alert, vex.dialog.confirm e vex.dialog.prompt . E c'è vex.dialog.open che è la combinazione di questi metodi per un utilizzo più avanzato, ad esempio per creare form, login o più finestre modali .

E ora, proveremo a creare una semplice finestra modale di accesso usando il metodo vex.dialog.open . Prima di iniziare con il metodo, dobbiamo prima applicare il tema che abbiamo usato con l'opzione defaultOptions.className . Per applicare il tema, puoi facilmente aggiungere il nome del tema come un'opzione di valore come tale.

 vex.defaultOptions.className = 'vex-theme-os'; 

Come accennato in precedenza, il metodo vex.dialog.open è fondamentalmente la combinazione di altri 3 metodi. Il seguente codice è una demo più complessa in cui chiamiamo alert, confirm e prompt internamente per creare una finestra di dialogo di accesso.

Quindi, la nostra casella di login apparirà come segue.

Pensiero finale

Ci sono molti altri strumenti per creare una finestra modale, ma Vex è piuttosto completo e altamente configurabile. Puoi aggiungere avvisi, prompt, conferme, moduli o altre opzioni di input alla casella e persino animarla . Altre fantastiche funzionalità sono le finestre modali multiple e le finestre di dialogo all'interno di caselle modali, che funzionano in modo ottimale nei dispositivi mobili.

Vex offre anche temi già pronti per far sì che il dialogo incontri il tuo stile, sia su CSS o SASS. È anche compatibile con la maggior parte dei browser moderni e molto leggero - solo sotto 7kb minified (2kb minified + gzip).

Sviluppatori Web: 10 canali Podcast migliori a cui è necessario iscriversi

Lo sviluppo Web è un settore in rapida evoluzione. Per rimanere nel circuito, devi costantemente essere informato con le ultime e le più grandi, e uno dei modi migliori per farlo è iscriversi a un podcast . Podcast o Podcasting è un mezzo affascinante per ottenere informazioni e notizie, in particolare per momenti come quando sei in ufficio o ti trovi in ​​palestra.Alcuni

(Consigli tecnici e di design)

10 progetti che mostrano Google ha il futuro capito

Avere una domanda? Chiedi a Google. Puoi dire che Google è il miglior motore di ricerca là fuori e nessuno potrebbe nemmeno discutere con te. Ma Google non è più solo una compagnia di motori di ricerca. Sì, naturalmente è anche la casa del famoso sistema operativo Android, ma la portata di Google è ben oltre il regno online.Per mo

(Consigli tecnici e di design)