Creazione di una finestra modale con HTML5 e Amp; CSS3

#close" title="Vicino" class=close>  X 
  Scatola modale 
  Questa è una casella modale di esempio che può essere creata usando i poteri del CSS3. 
  Potresti fare un sacco di cose qui come avere un annuncio pop-up che mostra quando viene caricato il tuo sito web o creare un modulo di login / registrazione per gli utenti. 

Iniziare lo styling

In questo momento abbiamo solo un link con un div che mostra sotto di esso. Inizieremo a disegnare la nostra scatola e renderla in effetti funzionale. Iniziamo a creare le nostre classi modalDialog e ad andare avanti.

.modalDialog {position: fixed;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,0.8);z-index: 99999;opacity:0;-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;pointer-events: none;}

Il codice qui è piuttosto semplice. Modelliamo la nostra finestra di dialogo dandole una posizione fissa, il che significa che si muoverà verso il basso della pagina, quando è aperta, se si scorre. Inoltre, impostiamo i bordi superiore, destro, inferiore e sinistro su 0 in modo che il nostro sfondo scuro si estenda su tutto il monitor.

Dal momento che vorremmo che lo sfondo intorno alla casella modale si oscurasse quando è aperto, impostiamo lo sfondo in nero e cambiamo leggermente l'opacità. Ci assicuriamo inoltre che la nostra casella modale sia in cima a tutto impostando la nostra proprietà z-index.

Infine, impostiamo una bella transizione per mostrare la nostra casella modale sullo schermo e nascondiamo la casella quando non viene cliccata impostando il display su none.

Potrebbe non essere completamente a conoscenza di cosa sia la proprietà pointer-events, ma ti permette di controllare quando fai e non vuoi che gli elementi siano cliccabili. Lo impostiamo per la nostra classe modalDialog perché non vogliamo che il link sia selezionabile fino a quando non viene attivata la pseudo classe ": target".

Funzionalità e aspetto

Ora aggiungiamo la nostra pseudo classe target e lo stile per la nostra casella modale.

.modalDialog:target {opacity:1;pointer-events: auto;}.modalDialog > div {width: 400px;position: relative;margin: 10% auto;padding: 5px 20px 13px 20px;border-radius: 10px;background: #fff;background: -moz-linear-gradient(#fff, #999);background: -webkit-linear-gradient(#fff, #999);background: -o-linear-gradient(#fff, #999);}

Con la nostra pseudo classe di destinazione , impostiamo il blocco del nostro display, in modo che quando viene cliccato il link, venga visualizzata la nostra casella modale. Usiamo anche la nostra proprietà degli eventi pointer in modo che quando il link è al passaggio del mouse sopra è attivo.

Quindi modelliamo il nostro tag div impostando la larghezza, la posizione e usando i nostri margini per sbalzare la casella modale dall'alto e centrandola sulla nostra pagina. Aggiungiamo poi un po 'di stile creando un po' di padding, impostando un bel raggio di confine e usando una sfumatura di bianco o grigio scuro per il nostro sfondo.

Chiudendolo

Ora che abbiamo modellato la casella modale e l'abbiamo resa funzionale, l'ultima cosa che dobbiamo fare è ottenere un buon aspetto del nostro pulsante di chiusura. Usando CSS3 e HTML5 puoi creare pulsanti che sembrano immagini, ma in realtà non lo sono. Ecco il CSS che usiamo per questo:

.close {background: #606061;color: #FFFFFF;line-height: 25px;position: absolute;right: -12px;text-align: center;top: -10px;width: 24px;text-decoration: none;font-weight: bold;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 1px 1px 3px #000;-webkit-box-shadow: 1px 1px 3px #000;box-shadow: 1px 1px 3px #000;}.close:hover { background: #00d9ff; }

Per il nostro pulsante di chiusura, impostiamo il pulsante di sfondo e posizioniamo il testo usando il nostro allineamento del testo e l'altezza della linea. Quindi posizioniamo il pulsante usando la posizione assoluta e impostiamo le nostre proprietà superiore e destra. Come possiamo fare un cerchio e aggiungere un po 'di profondità? Impostiamo il raggio del bordo su 12 e creiamo una leggera ombra. Quindi per aggiungere una piccola risposta da parte dell'utente, cambiamo lo sfondo con una luce blu quando passi il mouse su di essa (altre idee per il passaggio del mouse includono l'aggiunta di una transizione lineare per la dissolvenza in apertura, la modifica del testo del carattere o l'espansione dell'ombra del riquadro leggermente).

Perché la nostra casella modale è migliore

Come probabilmente avrai notato, il grande punto di forza di questa tecnica è la creazione di una casella modale in HTML5 e CSS3. Perché è un affare così grande? Le caselle modali in JavaScript sono qualcosa che un principiante potrebbe creare, ci sono centinaia di esempi e download pronti per essere usati. Quindi, perché vogliamo eliminare JavaScript in HTML5 e CSS3?

Sarebbe ingenuo da parte mia dire che un punto vendita è assicurarsi che le persone con JavaScript possano usarli; le statistiche mostrano che solo il 2% delle persone in tutto il mondo naviga senza JavaScript, quindi se questo non è un problema, che cos'è? Bene, abbiamo sfruttato le transizioni CSS3 durante la creazione della nostra casella modale. Il codice completo era:

-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;

Abbiamo usato solo tre linee di codice per creare la nostra animazione. Se lo paragoni a qualsiasi libreria di animazione JavaScript, sarai scioccato nel vedere quanto il nostro codice è ridotto al minimo. Ciò porta ad un'altra ragione, cioè, abbiamo un codice più pulito. Sappiamo a quale div è applicata l'animazione e che è lunga solo 3 righe. Questo rende facile per noi modificarlo o cambiare il div come meglio crediamo, e non dobbiamo preoccuparci di cambiare un div in JavaScript così come il CSS e l'HTML.

Infine, HTML5 e CSS3 sono il futuro. Tutti stanno lavorando per implementarli nei loro progetti e progetti, e il loro utilizzo aiuta a perpetuare la sua adozione e garantisce che non rimarrai indietro. Ottieni un codice più pulito, non devi preoccuparti delle librerie JavaScript e hai un sacco di web designer e sviluppatori pronti ad aiutarti con qualsiasi problema tu possa avere perché sono entusiasti di saperne di più sulla lingua e . HTML5 e CSS3 non stanno andando da nessuna parte, quindi non c'è ragione di non usarli.

Quando usare le caselle modali

Quindi ora che abbiamo spiegato come creare le caselle modali e perché dovresti renderle con HTML5 e CSS3, che dire quando dovresti usare le caselle modali?

Login / modulo di registrazione

Penso che le caselle modali siano particolarmente utili se utilizzate per i moduli di login e di registrazione. Crea un'esperienza così snella per l'utente e può davvero impressionare i visitatori.

Visualizza immagini / video

Un altro uso eccellente delle caselle modali è la visualizzazione di immagini o video (comunemente noti come lightbox). Permette all'utente di visualizzare il contenuto del tuo sito web senza uscire dalla pagina web, in modo da mantenerlo ulteriormente investito nella tua esperienza web.

Feedback degli utenti

Quando un utente sta interagendo sulla tua pagina web e vuoi comunicare o avvisare di qualcosa, quale modo migliore di farlo rispetto a una casella modale? Facebook si avvantaggia enormemente di questo quando vuoi cambiare la tua lingua sul loro sito web o per brevi stropicciature come il link "Perché devo fornire il mio compleanno" quando ti registri. Se non ha abbastanza testo o deve essere un'intera pagina, perché non usare una casella modale?

Annunci

Un ottimo esempio di pubblicità utilizzando le caselle modali è il servizio di radio musicale Pandora. Se non sei un membro del loro servizio premium, di tanto in tanto riceverai un annuncio sul tuo schermo. A volte si tratta di annunci audio che sembrano semplicemente ascoltare una canzone e, a volte, è una finestra popup per un video. Questa è una grande tattica per le persone che cercano di inserire pubblicità nelle loro pagine web senza averle sempre sulla pagina.

Conclusione

Ecco fatto, ora puoi creare una semplice casella modale HTML5 e CSS3, e puoi usarla per cose come moduli di accesso / registrazione utente, pubblicità e molto altro. Hai anche imparato perché dovremmo usare HTML5 e CSS3 invece di JavaScript, e ho visto alcuni esempi di come i siti usano le caselle modali e come puoi implementarli nei tuoi progetti.

Sei eccitato dalle possibilità di HTML5 e CSS3? JavaScript alla fine farà la fine di Flash? Dacci le tue opinioni nei commenti qui sotto.

Immagine in miniatura via Shutterstock.