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).

La realtà virtuale a 360 ° cambia tutto ciò che sai sui video

Negli anni '90, VR (Virtual Reality) era conosciuto solo tra i giocatori d'élite, ma col passare del tempo divenne sempre più accessibile al mondo al di fuori dei giochi. Oggi puoi vedere YouTubers, Facebookers, mezzi di informazione e supermercati utilizzando una forma più prontamente utilizzabile della realtà virtuale per attirare più spettatori: il video panoramico a 360 ° .Quest

(Consigli tecnici e di design)

30 Puns CSS che dimostrano i designer hanno un grande senso dell'umorismo

Il lavoro di un web designer può essere un vero dolore e frustrante, ma è anche una comunità affiatata con un sano senso dell'umorismo. Prendiamo ad esempio i giochi di parole CSS come quello sulla foto di copertina di questo post.In effetti, probabilmente otterrai questa verità universale anche se non sei un designer! Pu

(Consigli tecnici e di design)