Cum să se alinieze o fereastră modal în centrul, proiectarea și dezvoltarea site-ului

Buna ziua 🙂

În acest articol vreau să împărtășesc cu voi modul în care eu folosesc foarte des. Cu acesta, puteți alinia fereastra pop-up centrat pe ecran. Principalul avantaj al acestei metode este că sunt absolut nu este important lățimea și înălțimea ferestrei modal. Acest lucru este foarte util atunci când aveți un aspect de adaptare și nu este dat o înălțime clară a ferestrei. Mulți maeștri cu ușurință fereastră Aliniați pe orizontală, dar pe verticală, este cel mai des folosit sau offset exact din partea de sus / jos a ecranului sau ca procent.

Esența metodei este de a utiliza proprietatea vertical-align. Mai precis, este necesar să setați parametrul - mijloc. care va ajuta la elementele noastre ale ferestrei centrate pe verticală în raport cu celălalt. Un exemplu de ceea ce vom obține, pot fi vizualizate mai jos:

Este foarte simplu si se face folosind HTML + CSS. Mai întâi trebuie să adăugați codul HTML al ferestrei noastre. Totul este simplu, ca de obicei.

fereastra noastră constă dintr-un container principal, care se extind pe întregul ecran, și va avea un fond translucid - modal_cinw_ctnr. Ei bine, bloc, care este fereastra în sine - modal_cinw. In interiorul cutiei există un buton pentru a închide fereastra modal. Ea a precizat evenimentul - onclick. care realizează, de asemenea, de închidere. In interior caută un element cu Haydee - modal_cinw_ctnr și adăugarea de proprietăți pentru a afișa: nici unul.

Acum definim stilurile, care va face lucrarea de centrarea ferestrei pe pagină.

Luați în considerare parametrii de bază care afectează afișarea corectă a ferestrei, în ordine:

#modal_cinw_ctnr - containerul nostru. El este dat o poziționare fixă, înălțimea și lățimea - 100%. Doar alinia textul centrului cu ajutorul - text-align. Pentru fereastra de pe partea de sus a tuturor elementelor de pe site-ul, trebuie să setați parametrul - z-index, cu atât mai mult cu atât mai bine.
#modal_cinw_ctnr :: după - adăugarea pseudo la fereastra noastră au fost în măsură să se alinieze vertical în centru, pentru a lucra proprietate - vertical Alinierii. Toți parametrii sunt obligatorii, nici nu se poate șterge! afișare prescrisă Pseudo-parametru cu proprietatea - inline-bloc, precum și a scris mai mult de o dată, alinierea pe verticală, cu ajutorul - vertical-align: mijloc.
.modal_cinw - fereastra noastră modal. Există trei parametri principali - display: inline-bloc; vertical-align: middle; Poziția: relativă; Alții la cerere, dar, de asemenea, de dorit.
modal_close - butonul Close. Aici toate setările depind de ceea ce vrei să o vezi. Fii creativ cu ea ce vrei tu.

Asta e tot fereastra de aliniere de pe pagina. Până în prezent, această metodă îmi place cel mai bine, si nu ma lasa in jos. Sper că nu te lăsa în jos, și să utilizați și să vă bucurați.

Asta e tot, vă mulțumesc pentru atenție. 🙂

Dacă ați fost utile pentru munca mea, vă poate sprijini site-ul dvs. :)

Bună ziua dragi prieteni

Ai instalat extensia AdBlock sau altele asemenea. Adaugă site-ul meu pe lista albă, și, astfel, vnesesh contribuie la dezvoltarea acesteia. Instrucțiuni despre cum să dezactivați AdBlock doriți această fereastră