Questo tutorial è un altro divertente progetto CSS che ti aiuta a costruire qualcosa che potresti aver pensato fosse possibile solo con JavaScript. Creeremo una finestra modale che può essere mostrata e nascosta con un clic che è alimentato da una casella di controllo CSS.
Per addolcire l'accordo, utilizzeremo anche una query multimediale per garantire che lo schermo modale si adatti bene alle dimensioni dello schermo più piccole. Entriamo e vediamo come funziona!
Dimostrazione dal vivo: Clicca qui per il lancio.
Iniziare
Per iniziare, avremo bisogno di alcuni contenuti generici che siano sempre visibili sulla pagina. Non abbiamo bisogno di niente di speciale, solo del testo per ora. Ho usato un'intestazione di base e un paragrafo:
Fin qui tutto bene, passiamo ora al pulsante che attiva e disattiva la nostra finestra modale.
Attiva / disattiva HTML
In questo articolo, i commentatori hanno votato per vedere più tutorial su come sovrascrivere le checkbox per creare eventi di click CSS puri, quindi è esattamente quello che faremo qui!
Come funziona è abbastanza semplice. Iniziamo con un input con un tipo di? Checkbox? con un'etichetta di testo di base allegata in questo modo:
Come puoi vedere, l'etichetta? la sezione corrisponde all'ID dell'input. Questo è importante! La funzionalità netta è che, anche se nascondiamo la casella di controllo effettiva, che è esattamente ciò che faremo, quell'etichetta può servire come elemento selezionabile che alterna lo stato di controllo della casella.
HTML modale
Ora è il momento di completare il nostro codice HTML aggiungendo il codice della finestra modale attuale. Dopo la casella, crea un div con una classe di? Modal ?. All'interno di questo div, puoi inserire qualsiasi cosa tu voglia. Sono andato con un altro semplice intestazione e impostazione del paragrafo.
Con questo, abbiamo finito con il nostro HTML. Se apriamo la nostra pagina in un browser, non c'è davvero molto da vedere. Tuttavia, tutti gli elementi chiave di cui abbiamo bisogno sono a posto e pronti per essere stilizzati.
Corpo e contenitore CSS
Ora che abbiamo finito il nostro HTML, passiamo al nostro CSS e iniziamo a far sembrare questa cosa un po 'migliore. La prima cosa che farò è lanciare un'immagine di sfondo in legno ripetuta per rendere la nostra pagina un po 'più attraente.
Come puoi vedere, questa immagine viene gentilmente offerta da SubtlePatterns. Quindi, modificheremo il nostro contenitore. Innanzitutto, inizia con un margine, un riempimento e un ridimensionamento, quindi procedi con il testo.
Come puoi vedere, abbiamo usato la stenografia CSS per dichiarare lo stile dei caratteri per la nostra intestazione e il paragrafo. Questo è un modo sintetico per dichiarare peso, dimensioni, altezza della linea e tipo di carattere. Si noti che la mia altezza della linea è impostata su 1,5 senza specificare il tipo di unità. Questo è un piccolo trucchetto che ti consente di dichiarare l'altezza della tua linea come un rapporto con la dimensione del carattere.
Casella di controllo CSS
Ora che abbiamo stilizzato il nostro contenuto di pagina generico, è ora di attaccare l'etichetta e la casella di controllo. Il primo passo consiste nello stile dell'etichetta in modo che assomigli più a un pulsante e meno a una semplice porzione di testo.
Se cambiamo l'etichetta in un elemento a livello di blocco, possiamo dichiarare altezza, larghezza e colore di sfondo, il che ci aiuta a ottenere l'aspetto del pulsante che stiamo cercando. Notare anche che imposto uno stile hover per cambiare il colore e il cursore in modo che si comporti più come un link.
Con la nostra etichetta che cerca il modo in cui vogliamo, possiamo ora abbandonare la casella di controllo effettiva. Per fare ciò, basta cambiare la posizione in assoluto e spingerla fuori dalla tela.
Con questo codice, la nostra pagina è davvero fantastica. Ecco una sbirciatina:
CSS modale
Il contenuto della pagina statica è marcato e stilizzato. Il nostro prossimo compito è quello di rendere l'ultima porzione di HTML effettivamente simile a una casella modale. Lo facciamo con una bella fetta di CSS. Diamo un'occhiata e poi ti guiderò attraverso.
C'è molto da fare qui, quindi rompiamolo. Il primo obiettivo era centrare la scatola sulla pagina. Questo è abbastanza difficile dato che stiamo usando l'intera finestra e quindi non conosciamo le dimensioni del nostro genitore.Utilizzando il posizionamento assoluto, i margini automatici e reimpostando i valori di posizionamento, concentriamo automaticamente in modo automatico il nostro articolo sullo schermo.
Si noti che ho anche impostato lo z-index su un valore negativo. Questo perché la finestra modale, anche se nascosta, può bloccare altri elementi sulla pagina. Non lo vedrai, ma potrebbe potenzialmente impedire un clic o un passaggio del mouse, quindi lo gettiamo in fondo allo stack.
Il resto del codice è estetico. Gli abbiamo dato i lavori: uno sfondo leggermente trasparente, un parallelepipedo, una transizione e angoli arrotondati. Si noti che l'opacità è impostata su 0 per impostazione predefinita. Questo perché vogliamo solo che la finestra modale si apra quando clicchiamo sul pulsante.
Tipo modale
Abbiamo la nostra scatola in stile, ma non dimenticare il tipo all'interno. Useremo stili simili ma leggermente diversi rispetto all'altro testo sulla pagina. Ricorda di modificare sia l'h2 che il paragrafo.
Stato controllato
Fallo funzionare!
Il box modale ora sembra buono, ma non lo sapresti mai perché è nascosto. Facciamolo in modo che appaia quando si fa clic sull'etichetta / sul pulsante.
Qui abbiamo mirato l'input con il? Toggle? classe e uno stato controllato, quindi cercò un fratello adiacente con una classe di "modale". Successivamente, portiamo l'opacità e lo z-index della finestra modale fino a uno in modo che diventi completamente visibile.
CSS adattivo
La nostra scatola modale è quasi finita! Tutto funziona correttamente e stilizzato bene. Tuttavia, ho notato che le cose non sembrano giuste quando la dimensione del viewport è ridotta. Un po 'di stile adattivo qui va molto lontano, quindi mettiamoci dentro lo sforzo.
Come puoi vedere, ho semplicemente impostato una singola query multimediale a 767px e ridotto le dimensioni di alcune cose: le dimensioni della casella, la h2 e il paragrafo. Ora la casella modale ha due stati diversi che la rendono perfetta su schermi piccoli o grandi.
Guardalo in azione
Con quello, siamo tutti finiti! Per testare la tua pagina, visita la demo qui sotto.
demo: Clicca qui per il lancio.
Cosa pensi?
Ecco qua, una pura finestra modale CSS che si adatta alle dimensioni di schermi piccoli e grandi. Come sempre, ci sono alcune preoccupazioni semantiche quando dirotta una casella di controllo per qualcosa di simile, ma non mi sembrava che questo fosse un lavoro per: target, quindi questa sembrava la strada da percorrere.
Lascia un commento qui sotto e fammi sapere cosa ne pensi. Cosa cambieresti? Come faresti meglio?