Styling ferestre modale
În cazul în care DOM sunt ferestre modale?
Am loc de obicei, ferestrele de cod HTML modale înainte de corpul de închidere.
Eu o fac în principal din motive de styling. Poziționați fereastra modal în raport cu corpul etichetei, care acoperă întreaga pagină mult mai ușor, spre deosebire de setul obscur de elemente părinte, din care fiecare poate fi un context de poziționare.
Cum afectează acest lucru un cititor de ecran? Nu sunt expert pe accesibilitate, dar am auzit că fereastra modal este un lucru destul de complicat. Rob Dodson:
Cine a încercat cel puțin o dată pentru a face o fereastră modal disponibile, știu că, în ciuda aspectului său inofensivă, modal - este o luptă cu șeful de la sfârșitul jocului numit accesibilitatea web. Ei te vor înghiți și scuipat afară rămășițele. De exemplu, fereastra corectă modal trebuie să aibă următoarele caracteristici:
Focalizarea tastaturii trebuie să se deplaseze la fereastra modal, iar când închideți este de a reveni la activeElement anterior;
Tastatura de focalizare trebuie să fie blocat în fereastra modal pe care utilizatorul din greșeală, folosind tasta Tab nu a trecut dincolo de fereastră;
cititor de ecran ar trebui să fie, de asemenea, blocat într-o fereastră modal, nu ajunge accidental din ea.
Rob a creat un demo super-accesibil, cu o fereastră modal. Am văzut, de asemenea, un exemplu recent în noiembrie Blonay și Nicholas Hoffman. Puteti vedea, de asemenea, ARIA live Regiuni. Dacă trata manual focalizarea, partea de jos a paginii cea mai potrivită fereastră de cazare modal.
de centrare
Acum, vă voi arăta unul dintre trucurile mele preferate. O metodă de aliniere verticală și orizontală fără lățimi și înălțimi:
Mare pentru ferestre modale, care sunt situate, de obicei, exact centrate pe ecran și pot fi de diferite lățimi. Înălțimea ferestrei variază în funcție de conținutul.
Dacă știți lățimea și înălțimea ferestrei, puteți utiliza alte metode. Am luat această metodă, deoarece există o șansă ca textul va fi ușor neclară și transformată. Dacă nu știi despre ce vorbesc despre, uita-te pentru alte metode pentru a ghida de centrare (margin'y de exemplu, negativ).
locație fixă?
Vă rugăm să rețineți, am folosit poziția: fix;. Linia de jos este că, deoarece utilizatorul poate parcurge pagina, apelați-o fereastră modal, și va fi centrată în același mod ca și cum ar fi pur și simplu la chemat.
În opinia mea, de poziționare fixă este acum sigur de utilizat, chiar și pe dispozitive mobile. Cu toate acestea, dacă știți că aveți un public destul de mare, cu o foarte vechi dispozitive mobile, locație fixă pot avea probleme. În acest caz, să ia poziția: absolută și forțat pentru a derula pagina în sus. Sau orice altceva, nu știu, de testare alte moduri.
Lucrul cu o lățime
Pe marele ecran fereastra modal de obicei nu este doar centrat, de asemenea, are o lățime limitată (ca în captura de ecran de mai sus).
loc Problematic. Pe marele ecran, suntem bine, dar există o mulțime de ecrane, care nu chiar lățime de 600 px.
Ușor de a stabili folosind max-lățime:
Lucrul cu înălțime
Cu o înălțime de mai multe probleme. Conținutul poate schimba după! Metoda de centrare folosind transformare și încearcă să taie din partea de sus a ferestrei, bare de derulare, avem:
Noi din nou, va salva valoarea maximă:
Lucrul cu suprapunere
Noi încercăm să rezolve problema cu înălțimea ferestrei modal. Acum trebuie să ia în considerare, de asemenea, se suprapun. Este tentant să utilizeze proprietatea supraplin dreapta pe elementul .modal, dar există două probleme:
am putea avea elemente care nu au nevoie pentru a defila;
tavan tăiat umbra box-umbra, pe care am putea avea nevoie.
Aș sugera să intre în containerul interior:
Că zona .modal-curaj derulabil, este necesar să se precizeze înălțimea. Există o mulțime de moduri. O modalitate - de a poziționa containerul interior, astfel încât să se suprapună peste tot fereastra modal, și apoi se adaugă suprapunerea:
ferestre Modal trebuie să forțeze utilizatorul la orice acțiune până când nu a fost altceva. Dacă nu aveți nevoie pentru a forța utilizatorul la acțiune, ia în considerare un element de interfață diferit. Din fereastra modal trebuie să fie o cale de ieșire. Pentru o fereastră modal se caracterizează printr-o varietate de butoane și comutatoare (de exemplu, „Delete“ / „Cancel“), precum și butonul de închidere. Adăugăm la fereastra aproape butonul nostru.
Ar fi inteligent pentru a poziționa butonul de închidere, astfel încât este întotdeauna la vedere. Că utilizatorul nu a avut o situație în care el nu știe cum să închidă fereastra. Asta e ceea ce am părăsit zona fără a derula.
Stiluri add-te
Lucrul cu impunerea
ferestre Modal apar adesea în fundal suprapunere completă. lucru util din mai multe motive:
strat de suprapunere poate ascunde pagina, sporind astfel scopul de bază al ferestrei modal;
un astfel de strat poate salva pe interacțiunea care se află în afara ferestrei modal;
strat de suprapunere poate fi folosit ca un buton mare de aproape, anulați.
Închiderea clasei, mai degrabă decât deschiderea
Este extrem de tentant pentru a ascunde .modal de clasă implicită de display-ul de proprietate: nici unul;. Urmată de deschiderea ferestrei pentru a adăuga o clasă .modal.open
Vezi afișajul de proprietate: bloc;? Aici e problema. afișare de proprietate: nici unul; Este foarte util, deoarece ascunde fereastra nu este numai vizual, ci și pe tehnologia de asistență pentru persoanele cu handicap. Este mai ușor de a aplica valorile de proprietate asupra proprietăților existente ale afișare, în loc de a rescrie valoarea la întâmplare. fereastră modal .modal poate utiliza ecran: flex;, afișare: grilă; sau orice altceva. Diferite ferestre modale pot utiliza orice valoare și nu se teme să-l piardă pe display: block;.
deschiderea și închiderea comutatorului
Modul cel mai de bază pentru a deschide și închide fereastra:
Fereastra dar încă inaccesibile pentru cititori de ecran. Amintiți-vă ce am discutat mai sus. Link-ul veți găsi o demonstrație în care accentul se mută la fereastra modal, a blocat și a revenit la elementul din care a venit.
Revizie: Echipa webformyself.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram