Modale CSS puro. Come creare un modal popup jQuery

Il mio primo post.
Centrare un blocco rispetto a un altro blocco è un'attività relativamente comune; questa è la sua prossima soluzione. Per me è diventato il più versatile e copre tutti i casi che abbia mai incontrato.

La formulazione
Centrare il modale orizzontalmente e verticalmente.

Condizioni

• Le dimensioni Modalk possono essere specificate in qualsiasi unità di misura. Oppure potrebbero non essere specificati affatto.
• Reattività. Quando la finestra viene ridimensionata, il modale si ridimensiona alla dimensione corrente.
• Se il modale è disposto in modo da avere un'altezza minima / una larghezza minima, dovrebbe apparire uno scorrimento quando la finestra viene ridimensionata a una dimensione inferiore.
• IE 9+.
• Il posizionamento dovrebbe essere fatto in CSS, senza usare JS.

Come si faceva prima?
Se vengono specificate le dimensioni della finestra modale, tutto è semplice:

* (riquadro: bordo-riquadro;) .fixed-overlay (posizione: fisso; overflow: auto; sinistra: 0; alto: 0; larghezza: 100%; altezza: 100%; colore di sfondo: rgba (0, 0,0,0.5);) .modal (posizione: assoluta; sinistra: 50%; alto: 50%; margine sinistro: -100 px; margine superiore: -75 px;) .modal_container (colore di sfondo: #fff; larghezza: 200 px; altezza: 150 px;)
Funziona benissimo, nessuna lamentela. Ma questo metodo non ci soddisfa, perché non vogliamo dipendere dalla dimensione della finestra modale.

Ho visto il primo metodo che soddisfa tutti i requisiti elencati in Jabher. Si tratta di utilizzare la proprietà di trasformazione e il suo valore di traduzione invece del margine. È così che funziona:

Modale (posizione: assoluta; sinistra: 50%; alto: 50%; trasformazione: traslazione (-50%, -50%);). Modal_container (imbottitura: 20px; colore di sfondo: #fff; colore: # 000;)
Magia! Ora non dipendiamo dalle dimensioni di.modal_container. Questo perché translate si basa sulla dimensione dell'elemento a cui viene applicata la proprietà. Vi ricordo che i valori percentuali della proprietà margin verranno calcolati rispetto alla taglia del genitore, il che chiaramente non è adatto a noi.

Ora sui contro. Utilizzando la proprietà transform, ci troveremo di fronte al rendering subpixel. In poche parole, il contenuto inizierà a sfocarsi durante il ridimensionamento, il risultato sembra pessimo, specialmente durante il rendering di testo e linee sottili, come i bordi a pixel singolo. Non sono riuscito a trovare soluzioni a questo problema, se ne hai, condividi i commenti.

Tadaam

Non molto tempo fa, ho trovato un metodo sorprendente nella sua semplicità. I blocchi in linea corrono in soccorso. È facile centrarli orizzontalmente sovrapponendo l'allineamento del testo: centra sul genitore. Dopo un piccolo pensiero, mi sono ricordato della meravigliosa proprietà di allineamento verticale. Come funziona? Se questa proprietà è impostata al centro, gli elementi con questa proprietà saranno centrati verticalmente. l'uno rispetto all'altro... Ciò significa che oltre all'elemento .modal, deve esserci qualcun altro nell'overlay .fixed per aiutare il nostro modal a centrare la finestra. L'altezza di questo qualcuno deve essere uguale all'altezza di .fixed-overlay. Lo pseudo-elemento chiede il ruolo di questo aiutante:

.fixed-overlay__modal (text-align: center; white-space: nowrap;) .fixed-overlay__modal :: after (display: inline-block; vertical-align: middle; width: 0; height: 100%; content: " ";) .modal (display: inline-block; vertical-align: middle;) .modal_container (margin: 50px; padding: 20px; min-width: 200px; text-align: left; white-space: normal; background- colore: #fff; colore: # 000;)

I modali sono uno strumento comunemente usato nell'arsenale del webmaster. È molto adatto per risolvere un gran numero di attività, come la visualizzazione di moduli di registrazione, unità pubblicitarie, messaggi e così via.

Ma, nonostante il ruolo importante nel supporto informativo del progetto, i modali sono generalmente implementati in JavaScript, il che può creare problemi durante l'espansione delle funzionalità o la compatibilità con le versioni precedenti.

HTML5 e CSS3 ti consentono di creare modali con straordinaria facilità.

markup HTML

Il primo passo verso la creazione di un modale è un markup semplice ed efficace:

Apri finestra modale

All'interno di un elemento div il contenuto del modale è posizionato. È inoltre necessario disporre un collegamento per chiudere la finestra. Ad esempio, pubblichiamo un'intestazione semplice e alcuni paragrafi. Il markup completo per il nostro esempio sarebbe simile a questo:

Apri finestra modale

Stili

Crea una classe modalDialog e iniziamo a modellare l'aspetto:

ModalDialog (posizione: 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; -webkit-transition: opacità 400ms accelerazione; -moz-transition: opacità 400ms accelerazione; transizione: opacità 400ms accelerazione; display: nessuno; pointer-events: nessuno;)

La nostra finestra avrà una posizione fissa, cioè si sposterà verso il basso se si scorre la pagina mentre la finestra è aperta. Inoltre, il nostro sfondo nero si espanderà per riempire l'intero schermo.

Lo sfondo avrà una leggera trasparenza e sarà anche posizionato sopra tutti gli altri elementi utilizzando la proprietà z-index.

Infine, impostiamo le transizioni per visualizzare la nostra finestra modale e nasconderla in uno stato inattivo.

Forse non conosci la proprietà puntatore-eventi, ma ti permette di controllare come gli elementi reagiscono al clic del mouse. Impostiamo il valore al suo valore per la classe modalDialog, poiché il collegamento non dovrebbe rispondere ai clic del mouse quando la pseudo classe è attiva ": Obbiettivo".

Ora aggiungiamo la pseudo classe : obbiettivo e stili per la finestra modale.

ModalDialog: target (display: block; 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); )

Pseudo classe obbiettivo cambia la modalità di visualizzazione dell'elemento, quindi il nostro modale verrà visualizzato quando si fa clic sul collegamento. Modifichiamo anche il valore dell'immobile puntatore-eventi.

Definiamo la larghezza del modale e la posizione sulla pagina. Definire anche un gradiente per lo sfondo e gli angoli arrotondati.

Chiudi la finestra

Ora dobbiamo implementare la funzionalità di chiusura della finestra. Formiamo l'aspetto del pulsante:

Chiudi (background: # 606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: nessuno; font- peso: grassetto; -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 (sfondo: # 00d9ff;)

Per il nostro pulsante, impostiamo lo sfondo e la posizione del testo. Quindi posizioniamo il pulsante, lo arrotoliamo usando la proprietà di arrotondamento della cornice e formiamo un'ombra sottile. Quando passi il cursore del mouse sul pulsante, cambieremo il colore di sfondo.

In questo tutorial impareremo come creare una finestra modale utilizzando HTML5 e CSS3. Non useremo JS in questo tutorial, solo completamente CSS3. I modali possono essere utilizzati per moduli di feedback, per foto e video e ci sono molti altri modi per utilizzarli.

Iniziamo a creare la nostra finestra modale.

Passaggio 1. Markup HTML

La prima cosa che dobbiamo fare è il markup HTML, ad es. crea un collegamento su cui si aprirà la finestra e crea uno scheletro della nostra finestra. Per fare ciò, scrivi il seguente codice:

Passaggio 2. Contenuto della finestra modale

Ora aggiungiamo il contenuto della nostra finestra stessa. Facciamo un titolo e del testo e mettiamo tutto in un tag