La tecnica della finestra modale nascosta è un'ottima soluzione per gestire gli elementi dell'interfaccia che non sono particolarmente necessari nella pagina. I social network possono utilizzare finestre modali per messaggi privati e moduli che vengono utilizzati solo dai membri del sito. Questo vale anche per i blog e le riviste che hanno una pagina di login dell'autore separata dal sito principale. Le finestre modali sono molto più semplici rispetto alla creazione di nuove finestre in JavaScript perché tutto viene visualizzato nella stessa finestra utilizzando il codice HTML già presente nella pagina.
Voglio dimostrare come possiamo costruire una finestra modale personalizzata basata sul plugin jQuery leanModal. Il plugin è completamente open source e libero da usare sotto la licenza generale del MIT. Mi piace questo plugin più di altri perché ci dà solo le nozioni di base? senza troppa personalizzazione Questo lascia spazio per aggiornare la finestra modale tramite CSS e ancora utilizzare alcuni parametri aggiuntivi in jQuery.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Per prima cosa ho creato due file denominati? Index.html? e? style.css? che contengono tutto il codice demo. All'interno di questa stessa directory ho creato un'altra cartella chiamata / js / che contiene due documenti. La prima è l'ultima mini libreria jQuery e la seconda è il file plugin leanModal denominato jquery.leanModal.min.js.
Ora può essere una sorpresa apprendere che non è necessario includere alcun foglio di stile CSS predefinito! Questo perché il nostro plugin leanModal fornisce solo funzioni JS di base, tutto il resto è ridotto per fornire un modello nudo. Tuttavia, abbiamo bisogno di copiare oltre un blocco di CSS che implementa l'effetto di sovrapposizione scura. Questo viene copiato direttamente dal sito web del plugin che ho aggiunto al mio foglio di stile predefinito.
L'area di sovrapposizione verrà visualizzata al 100% di larghezza e altezza nella parte superiore della pagina. Quindi jQuery aggiungerà il div modale mirato per apparire sopra tutto il resto del codice HTML. Notevolmente il contenuto del mio corpo è abbastanza vuoto, l'unico elemento importante è il pulsante di attivazione / disattivazione per la visualizzazione di questa finestra modale. Ma diamo un'occhiata all'interno del modulo HTML incapsulato all'interno del #loginmodal div.
Nota che ho incluso display: none; come singola proprietà CSS incorporata. Abbiamo bisogno di forzare questo div per non avere display, quindi leanModal () può renderlo dissolvenza nella pagina e visualizzarlo come un elemento di blocco. Sto usando un display di forma molto semplice con stili simili a questo modulo di checkout CSS. Il design blu chiaro funziona bene in contrasto con la sovrapposizione di ombre più scure, inoltre possiamo utilizzare effetti di transizione CSS3 sui campi di input.
Un altro elemento cruciale della pagina è il pulsante di invio. Poiché questo modulo non invierà alcun dato al server, vogliamo solo nascondere la finestra modale una volta che l'utente lo ha inviato. Ho aggiunto la classe .hidemodal che possiamo impostare nel metodo jQuery. Interromperà l'invio del modulo predefinito e visualizzerà questa finestra modale come un effetto puramente estetico.
Stili di layout CSS
Il mio documento CSS contiene tutte le tipiche reimpostazioni di pagina di cui abbiamo bisogno, insieme ad alcuni stili tipografici e pulsanti. La finestra modale di login centrata contiene un nuovo stile di pulsante che imita l'altro design piatto. Ma per fortuna non ci sono troppe proprietà CSS uniche che richiedono un'ulteriore spiegazione. Dovresti essere in grado di costruire i tuoi propri stili di finestra modali senza troppi problemi.
Penso che gli elementi chiave da riconoscere siano i contenitori per l'effetto di sovrapposizione e la finestra modale. Li ho spostati in fondo al foglio di stile, raggruppati con tutte le altre proprietà della finestra modale. Ho limitato la finestra modale a una larghezza di 300 px poiché questo esempio richiede solo un modulo con 2 input. Ma ricorda che leanModal non impone alcun stile predefinito sulla tua finestra, quindi il design è al 100% nelle tue mani.
Ciascuno dei campi di testo ha un effetto di animazione di transizione sul bordo e sulle ombre del riquadro. Anche il colore del testo si sbiadirà quando si passa tra i due input. Ho scelto una combinazione di colori blu più chiara e ho abbinato gli effetti del pulsante ai campi di input. Ci sono molte proprietà CSS3 insieme ai prefissi dei loro fornitori, quindi questa forma è orientata più verso i più recenti motori di rendering. Ma dovrebbe essere visualizzato correttamente in tutti i principali browser.
Effetto modale in jQuery
Sfortunatamente il CSS3 non è al punto in cui possiamo fare affidamento sulla sua capacità di nascondere / mostrare finestre differenti su un evento click. E non vi è alcuna garanzia che anche questa sarà una possibilità. Quando si tratta di finestre modali che utilizzano un effetto shadowbox, sarà molto più semplice attaccare con JavaScript. Per fortuna il plugin leanModal ha bisogno solo di una singola riga di JS da attivare. Ho aggiunto il seguente blocco di codice subito prima della mia chiusura etichetta.
Il primo piccolo blocco di codice controllerà ogni volta che l'utente preme? Accedi? e tenta di inviare il modulo. Stiamo usando le parole chiave JavaScript restituisce falso per fermare l'evento prima che si inneschi. Puoi leggere ulteriori informazioni su questo metodo su Stack Overflow. Ora l'ultima riga di codice è tutto ciò di cui abbiamo effettivamente bisogno per far funzionare la finestra modale.
Se non abbiamo bisogno di personalizzare alcun parametro, allora solo la linea $ ( '# Modaltrigger'). LeanModal () dovrebbe funzionare alla grande Comunque per questa demo voglio mostrare le 3 variabili opzionali che puoi inserire nella funzione. Per prima cosa aggiungiamo il valore di offset dalla parte superiore della finestra per posizionare questa nuova casella modale. Quindi viene utilizzato un valore da 0.0-1.0 per contrassegnare il livello di opacità dello sfondo.
E quindi finalmente possiamo allegare un nuovo selettore jQuery per il pulsante di chiusura. Può trattarsi di una classe o di un ID o di un mix che include selettori di attributi HTML. Per il mio esempio utilizziamo la stessa classe che ho aggiunto al pulsante di accesso .hidemodal. In questo modo la finestra modale dovrebbe nascondersi ogni volta che si preme il pulsante di invio.
Per ottenere il funzionamento effettivo del modulo dovrai rimuovere questa classe dal pulsante e rimuovere il blocco del codice JavaScript prima della funzione leanModal (). Quindi il modulo verrà inviato correttamente e dovrebbe reindirizzare l'utente a una nuova pagina. Ma dovresti provare molte idee diverse e vedere quali tipi di contenuti possono funzionare bene all'interno di una visualizzazione modale.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
L'effetto finestra modale può essere utilizzato in molte più situazioni rispetto ai soli moduli di accesso. Devi pensare a vari elementi dell'interfaccia utente di una pagina web e considerare quali elementi potrebbero essere più utili nella loro finestra. Questo riguarda forme speciali o contenuti dettagliati più lunghi che non verranno riconosciuti da ogni visitatore.
Si prega di controllare la mia dimostrazione dal vivo e vedere come possiamo implementare questo effetto jQuery leanModal usando blocchi HTML standard. Chiunque abbia una conoscenza di base dei CSS non dovrebbe avere problemi a personalizzare i miei stili predefiniti. Ci sono così tanti usi per questa funzionalità che è meglio lasciarla all'immaginazione. Ma spero che questi esempi di codici tutorial possano fornire un modello di base per gli sviluppatori che stanno cercando di risparmiare tempo sul loro prossimo progetto.