Share
Oggi prenderemo la finestra modale di Popup di Orman e la ricreamo con HTML e CSS. Utilizzeremo quindi il plugin jQuery Reveal per dargli piena funzionalità. Faremo anche un ulteriore passo in avanti e aggiungeremo alcune query media CSS3 per adattarle all'utilizzo mobile. Scaviamo dentro!
[Questa è una semplice finestra modale, perfetta forse per i piccoli messaggi di conferma visti nell'anteprima. E no, non ci sono scuse per aver mai usato Comic Sans. Orman Clark
Inizieremo creando un documento vuoto usando il markup HTML5. Ci siamo collegati al nostro foglio di stile e allo Shiv HTML5 che permetterà agli elementi HTML5 di essere visualizzati correttamente in IE. Fondamentalmente, abbiamo anche collegato alla più recente libreria jQuery (ospitata da Google) nella parte inferiore della nostra pagina per ottimizzare il caricamento della pagina.
Infine, potresti notare che abbiamo incluso un'altra riga nella nostra testa; il metatag del viewport. Ciò consentirà ai dispositivi di interpretare correttamente la nostra pagina indipendentemente dalle dimensioni dello schermo. Se vuoi saperne di più su questo assicurati di dare un'occhiata a questo suggerimento rapido!
Finestra modale popup
Prima di iniziare ad aggiungere markup e stili, scaricheremo il plugin Reveal. Vai su http://www.zurb.com/playground/reveal-modal-plugin e premi "Scarica il kit Reveal" a destra della pagina.
Disimballare il file che hai scaricato. Dovrai copiare jquery.reveal.js nella directory principale del tuo sito, o nella cartella che preferisci. Ho creato una cartella chiamata "js", che è dove di solito tengo le mie risorse javascript. Successivamente avremo bisogno di fare riferimento al nostro script, quindi copia il seguente dopo il tuo script jQuery, assicurandoti che il percorso sia corretto.
Per questo tutorial, creeremo un pulsante che può essere cliccato per attivare il modale. Sono andato avanti e ho preso uno stile per i pulsanti da Freebie dei Simple Web Buttons di Orman.
Cliccami
Prima di andare e introdurre alcuni stili, aggiungeremo rapidamente un reset per rimuovere eventuali margini indesiderati, ecc. Dal browser. Abbiamo anche aggiunto alcuni stili per il corpo, solo una famiglia di font, lo sfondo e assicurato la dimensione del carattere al 100%.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, del, dfn, em, img, ins, kbd, q, s, samp, piccolo, strike, forte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, articolo, a parte, canvas, dettagli, embed, figura, figcaption, footer, header, hgroup, menu, nav, output, ruby, sezione, riepilogo, ora, segno, audio, video margine: 0; padding: 0; confine: 0; font: inherit; vertical-align: baseline; html font-size: 62.5%; / * HTML5 display-role reset per i browser più vecchi * / article, a parte, dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section display: block; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; a text-decoration: none; body font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; dimensione font: 100%; background: #fff;
Per il pulsante creeremo lo stile usando alcuni gradienti, ombre di riquadri e raggio di bordo. La cosa principale che devi prendere in considerazione qui è il posizionamento.
In primo luogo stiamo posizionando il pulsante assolutamente, sul corpo / browser. Applicando il 50% a sinistra e in alto posizionerà il suo angolo in alto a sinistra, perfettamente centrale nello schermo. Quindi abbiamo bisogno di meno un margine superiore e sinistro. Per scoprire che cosa abbiamo bisogno di meno loro daremo un'occhiata alla nostra altezza e larghezza. Abbiamo bisogno di metà della nostra larghezza di 78 per ottenere 39, e meno il margine sinistro per quello. Quindi prendiamo 28/2 = 14 e meno il margine superiore di quello. Se non sei sicuro di ciò che sta accadendo qui, è un trucco per centrare verticalmente e orizzontalmente un oggetto all'interno del CSS. Se vuoi saperne di più, dai un'occhiata a questo bel post su CSS Tricks.
Fatto ciò abbiamo anche aggiunto un effetto hover opzionale.
#button width: 78px; altezza: 28px; background-image: -webkit-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -moz-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -o-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -ms-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); border: 1px solid # ca9336; -webkit-box-shadow: inset 0px 1px 0px # fee395, 0px 1px 1px rgba (0,0,0, .15); -moz-box-shadow: inset 0px 1px 0px # fee395, 0px 1px 1px rgba (0,0,0, .15); box-shadow: inset 0px 1px 0px # fee395, 0px 1px 1px rgba (0,0,0, .15); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-size: 13px; font-weight: bold; text-align: center; line-height: 28px; color: # 996633; text-shadow: 0px 1px 0px rgba (255,255,255, .4); position: absolute; superiore: 50%; a sinistra: 50%; margin-top: -14px; margin-left: -39px; #button: hover background-image: -webkit-linear-gradient (in alto, rgb (254, 194, 82), rgb (254, 205, 97)); background-image: -moz-linear-gradient (in alto, rgb (254, 194, 82), rgb (254, 205, 97)); background-image: -o-linear-gradient (in alto, rgb (254, 194, 82), rgb (254, 205, 97)); background-image: -ms-linear-gradient (in alto, rgb (254, 194, 82), rgb (254, 205, 97)); background-image: linear-gradient (top, rgb (254, 194, 82), rgb (254, 205, 97)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fec252', EndColorStr = "# fecd61"); -webkit-box-shadow: inset 0px 1px 0px # fed17e, 0px 1px 1px rgba (0,0,0, .1); -moz-box-shadow: inset 0px 1px 0px # fed17e, 0px 1px 1px rgba (0,0,0, .1); box-shadow: inset 0px 1px 0px # fed17e, 0px 1px 1px rgba (0,0,0, .1);
Successivamente aggiungeremo dei markup che creeranno la nostra finestra modale. Inizieremo creando un div con un ID di "modale". Questa sarà la base della nostra finestra modale.
Cliccami
OK, su uno stile per questa finestra. Ancora una volta useremo il metodo di centraggio. Potresti anche vedere che stiamo usando !importante. Inchiodare gli stili CSS in questo metodo è spesso sconsigliabile (può rovinare la specificità di un foglio di stile e rendere l'editing futuro davvero imbarazzante), ma in questo caso non abbiamo alternative in quanto gli stili definiti dai plugin devono essere sovrascritti.
Abbiamo anche aggiunto visibility: hidden; per nascondere il menu, verrà mostrato facendo clic sul nostro pulsante.
#modal width: 360px; altezza: 189px; padding: 8px; sfondo: RGBA (0,0,0, 0,3); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; posizione: assoluta! importante; superiore: 50%! importante; a sinistra: 50%! importante; margin-top: -94px! importante; margin-left: -180px! important; z-index: 101;
Abbiamo applicato un raggio di 8 px che potrebbe sembrare un valore insolito, ma questo garantirà che gli angoli esterni scorrano correttamente attorno a quelli all'interno.
Successivamente aggiungeremo il titolo del modello, questo sarà un altro div con un ID di intestazione e solo un testo all'interno. Certo, sentiti libero di usare un o qualunque cosa tu preferisca.
CliccamiSei sicuro di volerlo fare?Successivamente, aggiungeremo un po 'di CSS per modellarlo, solo alcune cose di base qui, ombre di sfumature, ecc.
#heading width: 360px; altezza: 44px; background-image: -webkit-linear-gradient (in alto, rgb (249, 249, 249), rgb (233, 233, 233)); background-image: -moz-linear-gradient (in alto, rgb (249, 249, 249), rgb (233, 233, 233)); background-image: -o-linear-gradient (in alto, rgb (249, 249, 249), rgb (233, 233, 233)); background-image: -ms-linear-gradient (in alto, rgb (249, 249, 249), rgb (233, 233, 233)); background-image: linear-gradient (top, rgb (249, 249, 249), rgb (233, 233, 233)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f9f9f9', EndColorStr = "# e9e9e9"); border-bottom: 1px solid #bababa; -webkit-box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba (0,0,0, .08); -moz-box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba (0,0,0, .08); box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba (0,0,0, .08); -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; font-size: 14px; font-weight: bold; text-align: center; line-height: 44px; color: # 444444; text-shadow: 0px 1px 0px #fff;
Passaggio 6: Contenuto principale modale
Ora creeremo la sezione che contiene il paragrafo e i pulsanti.
CliccamiSei sicuro di volerlo fare?Cliccando si renderà Comic Sans il tuo nuovo sistema
carattere predefinito. Seriamente, ci hai pensato?Sì, fallo ora!
No, sono pazzo!
Ancora alcune regole CSS di base, per il paragrafo abbiamo definito la larghezza del 100% e allineato il testo al centro, ma nel codice HTML abbiamo usato un'interruzione di riga.
#content width: 360px; altezza: 144px; sfondo: #fcfcfc; -webkit-box-shadow: 0px 1px 3px rgba (0,0,0, .25); -moz-box-shadow: 0px 1px 3px rgba (0,0,0, .25); box-shadow: 0px 1px 3px rgba (0,0,0, .25); -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; #content p font-size: 13px; font-weight: normale; text-align: center; line-height: 22px; color: # 555555; width: 100%; fluttuare: a sinistra; margine: 19px 0;
Step 7: Quei pulsanti!
Abbiamo aggiunto alcuni markup per i pulsanti nell'ultimo passaggio, ma ora aggiungeremo alcuni stili per loro. Potresti aver notato che abbiamo usato anche due immagini qui, queste sono usate per il cross e il tick. Il modo in cui abbiamo strutturato questo è aggiungendo due classi,
pulsanteche definisce tutti gli stili principali di un pulsante e quindi arossoeverdeclasse, ovviamente per creare i colori.Abbiamo anche preso di mira le immagini all'interno dei pulsanti, le abbiamo allineate a sinistra e le abbiamo date una larghezza e un'altezza.
.button width: 138px; altezza: 33px; font-size: 13px; font-weight: bold; line-height: 33px; color: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0px 1px 0px rgba (255,255,255, .5), 0px 1px 2px rgba (0,0,0, .3); -moz-box-shadow: inset 0px 1px 0px rgba (255,255,255, .5), 0px 1px 2px rgba (0,0,0, .3); box-shadow: inset 0px 1px 0px rgba (255,255,255, .5), 0px 1px 2px rgba (0,0,0, .3); float: sinistra; . button img float: left; larghezza: 33px; altezza: 33px; .button.green background: -webkit-linear-gradient (in alto, rgba (170,212,79,1) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41,1) 100%); background: -moz-linear-gradient (top, rgba (170,212,79,1) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41, 1) 100%); background: -o-linear-gradient (top, rgba (170,212,79,1) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41, 1) 100%); background: -ms-linear-gradient (top, rgba (170,212,79,1) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41, 1) 100%); sfondo: gradiente lineare (superiore, rgba (170,212,79,1) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41,1) 100 %); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# aad44f", endColorstr = "# 609d29", GradientType = 0); border: 1px solid # 5b8821; margine: 0 5px 0 35px; .button.red background: -webkit-linear-gradient (in alto, rgba (248,114,136,1) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95 %, rgba (206,59,70,1) 100%); background: -moz-linear-gradient (top, rgba (248,114,136,1) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95%, rgba (206, 59,70,1) 100%); background: -o-linear-gradient (top, rgba (248,114,136,1) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95%, rgba (206, 59,70,1) 100%); background: -ms-linear-gradient (top, rgba (248,114,136,1) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95%, rgba (206, 59,70,1) 100%); sfondo: gradiente lineare (superiore, rgba (248,114,136,1) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95%, rgba (206,59,70 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f87288", endColorstr = "# ce3b46", GradientType = 0); border: 1px solid # b0333e; margine: 0 35px 0 5px;
Step 8: Agganciarlo con Reveal
Ora abbiamo finalmente completato lo styling del nostro modal, lo collegheremo al plug-in Reveal. Per prima cosa dovremo tornare al nostro CSS, trovare
#modalee aggiungivisibility: hidden;ad esso.Successivamente dovremo tornare al nostro documento html e aggiungere quanto segue alla fine del nostro documento, sotto dove facciamo riferimento allo script Reveal. Qui stiamo collegando il pulsante come il nostro clic e il nostro div mod come l'elemento che si apre.
Passo 9: dov'è quella sovrapposizione a?
Potresti pensare che abbiamo finito, ma aspetta il soldato! Dovremmo avere una sovrapposizione nera per coprire tutto sotto il modale - l'intera pagina. Per risolvere questo problema, sarà necessario applicare alcuni CSS a un elemento creato dal plugin di rivelazione, che copre la pagina.
.reveal-modal-bg position: fixed; altezza: 100%; larghezza: 100%; sfondo: # 000; sfondo: rgba (0,0,0, .4); z-index: 100; display: nessuno; inizio: 0; a sinistra: 0;
Passaggio 10: renderlo mobile
Ok, abbiamo completato la nostra modal ora, ma aggiungeremo un paio di stili per far fronte a dispositivi più piccoli. La seguente query multimediale (aggiunta dopo tutte le altre regole CSS) applica gli stili se visualizzati con schermate non superiori a 767px. Per consentire la visualizzazione corretta del modale senza sovrapposizione dello schermo, è sufficiente modificare alcune larghezze, altezze e dimensioni dei caratteri.
@media solo schermo e (larghezza massima: 767px) #modal larghezza: 284px; altezza: 156px; padding: 8px; margin-left: -150px! important; margin-top: -78px; #heading width: 284px; altezza: 28px; line-height: 28px; font-size: 0.688em; #content width: 284px; altezza: 128px; #content p width: 284px; font-size: 0.688em; .button img width: 23px; altezza: 23px; .button width: 108px; altezza: 23px; line-height: 23px; font-size: 0.688em; .button.green margin: 0 4px 0 28px! important; .button.red margin: 0 28px 0 4px! important;
Browser meno recenti
Quindi, come andrà tutto questo nei browser più vecchi?
Bene, a parte le moderne tecniche CSS3 come i gradienti, il raggio di confine ecc. Il modale funzionerà esattamente come previsto nelle vecchie versioni di Internet Explorer. Un perfetto esempio di degradazione elegante.
Conclusione
Ok, ce l'abbiamo fatta! Abbiamo preso un altro dei progetti di Orman e lo abbiamo codificato, questa volta usando un plugin jQuery gratuito chiamato Reveal.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Accentsconagua
Sì, fallo ora! 
No, sono pazzo! 
