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

Smetti di discutere il design di Minutia e inizia a prendere le grandi decisioni

Così tanti designer sprecano il loro tempo a contemplare cose che, nel lungo periodo, sono completamente inutili per il loro sviluppo come professionisti creativi, liberi professionisti o migliori designer in generale.Riducono a dettagli insignificanti - quale dimensione dei caratteri dovrebbe essere il loro nome sul loro biglietto da visita; se debbano rendere quel pulsante CTA bianco o blu, allora chiedersi perché sembrano radicati nella loro situazione attuale.

(Consigli tecnici e di design)

I designer vivono in una bolla?

È una domanda provocatoria, lo so. La domanda se la comunità del design è troppo insulare è quella che molti nella comunità del design si sono interrogati da tempo. Ci sono più designer che lavorano come mai prima d'ora, e il design gioca un ruolo molto importante nelle attuali industrie tecnologiche. Pers

(Consigli tecnici e di design)