Costruisci modali usando puro CSS con CSS Modal

Nel web design, è necessario disporre di una buona organizzazione dei contenuti. Ciò aiuta a fornire agli utenti informazioni più leggibili e funzionali. Puoi farlo creando un layout pulito e ordinato sul sito web. Per organizzare il contenuto, ci sono molti elementi e strutture di interfaccia che puoi usare, e il dialogo modale è uno di questi.

Se hai creato una finestra di dialogo modale con jQuery o altri plugin, abbiamo delle buone notizie per te. Con la libreria Modale CSS, avrai solo bisogno di puro CSS.

Hans Christian Reinl, colui che ha sviluppato CSS Modal, ha incluso molti vantaggi che ne derivano. Alcuni dei vantaggi sono che può essere usato come plug-in SASS, c'è il supporto cross browser, è ottimizzato per i dispositivi mobili, può essere inserito con i media (immagine, video e audio) ed è piccolo e veloce.

Quasi tutti i browser moderni supportano CSS Modal . È stato testato su Chrome, Firefox, Safari 6, Opera 12, IE8, IE9 +, Windows Phone 8, iOS 6 e Android. Mentre ha ancora problemi minori per Android 2.3 (lo scorrimento è il problema più grande, al momento della scrittura), funziona ancora bene.

Markup HTML

Il CSS Modal ha tre parti su cui lavorare: intestazione, contenuto e piè di pagina . L' header è dove puoi inserire il titolo per il modale. Il contenuto è per la visualizzazione delle informazioni importanti che si desidera evidenziare. Questa parte supporta testo, immagini e codice incorporato. Per quanto riguarda il footer, puoi aggiungere ulteriori informazioni qui, ad esempio un pulsante di chiusura, un pulsante di una nuova finestra aperta, ecc.

Per creare una finestra di dialogo modale, dovresti utilizzare il tag di section e alcuni data-attributes predefiniti, class e id. All'interno del tag della section, deve essere incluso un elemento .modal-inner classe .modal-inner . Ecco il markup di base:

L' id nel tag della section è usato per chiamare il modale da un'altra funzione, per esempio da un collegamento, e il valore può essere modificato come richiesto. a tag sul codice, sarà usato come pulsante di chiusura modale. L'attributo di href deve essere lasciato come mostrato sopra, poiché interromperà lo scorrimento della pagina verso l'alto quando si fa clic.

L' header e il footer sono parti opzionali, che puoi includere (o meno). Ma tieni presente che se si utilizza un'intestazione, è necessario aggiungere un nome ID univoco e modificare l'attributo aria-labelledby sullo stesso valore.

Non dimenticare di includere nel tuo progetto la libreria modale CSS, che puoi scaricare dalla sua pagina GitHub.

 ..  .. 

Javascript aggiuntivo

Ci sono ancora alcuni problemi quando usi CSS Modal con puro CSS, come ad esempio:

• Problemi con la compatibilità con IE 8
• Tasto Esc sulla tastiera per uscire
• Scorrimento della prevenzione dello sfondo
• Effetto Focus sul modale e ritorno a pagina dopo averlo chiuso

Quindi per risolvere questi problemi, javascript è ancora necessario qui. Fortunatamente, CSS Modal ti ha fornito un codice sorgente javascript leggero per la tua convenienza. Includi questo codice prima del tag body chiusura.

Pensiero finale

La creazione di modal con puro CSS ha ancora alcuni svantaggi, ma può diventare uno strumento alternativo per arricchire ulteriormente il tuo sito web. E probabilmente vorresti provare qualcosa di leggermente diverso. Con un po 'di creatività, potresti creare dei modali davvero fantastici. Dagli Un colpo.

Twist: strumento di comunicazione pieno di funzionalità alternativo a Slack

Le app di comunicazione di gruppo come Slack stanno diventando sempre più popolari al giorno d'oggi, in quanto ottimizzano la comunicazione tra team e membri del team. Ora, il mercato delle app di comunicazione del team ha appena ottenuto una nuova voce chiamata Twist, creata dagli stessi che ti hanno portato Todoist.

(Consigli tecnici e di design)

Designer: Quando personalizzare il tipo per i loghi

I caratteri tipografici esistono per una ragione . Rendono il nostro lavoro di progettisti molto, molto più semplice, poiché non dobbiamo considerare gli intricati e inesplorati progetti di forme di lettera appropriate per i nostri progetti. Ma a volte, un font progettato da qualcun altro non è abbastanza . F

(Consigli tecnici e di design)