fereastra Modal pe HTML5, CSS3 și casetele de selectare ascunse
fereastră Modal pe HTML5, CSS3 și casetele de selectare ascunse
La formarea rama ferestrei modal-html ghidat de principiile de construire a unei pagini HTML standard, de exemplu, fereastra noastră constă dintr-o bază a containerului
HTML cadru
Alături de elementele standard html tag și
modal-wrap .modal-suprapunere
Dacă nu aveți nevoie de oricare dintre secțiuni, de exemplu, nu este nevoie în titlu, puteți exclude
Mulți, mulți, utilizează ferestre modale pentru a prezenta imagini diferite, astfel încât, cu condiția și această opțiune. Fotografii, încorporate în corpul de lățimea ferestrei cerut 100% max-lățime: 100%;. determinarea înălțimii pentru înălțimea automată: auto;. cu care imaginile sunt afișate corect atunci când redimensiona fereastra într-o direcție sau în celălalt sens, se pare ca e adaptabilitate)).
Pentru a obține efectul lightbox, atunci când imaginea umple întregul spațiu al unității pop-up, elimina suficient antet div, unitatea de jos, cu butonul și setați padding necesară în interiorul unei ferestre modale, în selectorul .modal-corp.
Asta-i tot! Rămâne doar să se amintească faptul că această metodă va funcționa bine doar în browsere moderne, proprietăți CSS3, care este atât de singurul său dezavantaj de sprijin necondiționat.
Săpa mai adânc în codul de aici.
În concluzie, încă o dată uita-te la demo și dacă se dorește, pentru o analiză mai detaliată, descărcați codul sursă, am atent ambalate într-o arhivă, și a pus pe Yandex.Disk lui:
Va fi recunoscători dacă proiectul de sprijin - adăugarea unui blog pentru excepții AdBlock și partaja un link către o înregistrare în rețelele lor sociale: