Windows modal html. Creați o fereastră modală folosind HTML5 și CSS3. Cea mai simplă fereastră modală folosind HTML și CSS
Simplu în funcție fereastra modală, care se desfășoară în întregime pe CSS pur unde o poti pune sub diferite funcții pentru a suna pe site. Acesta este probabil unul dintre multele pe care le-am întâlnit dintr-o selecție de ferestre modale, din punct de vedere al setărilor sale, dar și din punct de vedere al instalării. Dar principalul lucru este funcționalitatea sa, care nu va fi inferioară altora. De asemenea, implicit este realizat într-o nuanță deschisă, unde în dreapta colțul de sus Există un buton instalat sub formă de cruce.Care va fi folosit pentru a dezactiva funcția sau pur și simplu pentru a face ca rama să dispară, unde chiar și pe acest element mic există un efect de schimbare a paletei de culori. Acum webmaster-ul îl poate pune pe site și plasează în el o descriere sau operatori care pot afișa diferite categorii, ca statistici sau informator.
Dar lucrul este că, dacă aveți un stil de resurse întunecat, atunci în stil puteți schimba rapid gama sau, mai degrabă, o puteți adapta la design original. Aici este unul dintre metode standard cum să faci CSS pur pe o fereastră modală care va fi lansată atunci când se face clic pe butonul de sub linkul cu legarea HTML. Butonul în sine este mai mult pentru vizibilitate, unde în stiluri, prin eliminarea unei clase, va rămâne numele, care poate fi plasat fie în navigare, fie în panoul de control, unde se află funcționalitatea principală sau navigarea pe site.
Aceasta se întâmplă când verifici dacă totul funcționează bine:
Să începem instalarea:
Fereastra cu buton
ZorNet.Ru - portal webmaster×
Aici veți găsi conținut pe tema site-ului.
CSS
Butksaton-satokavate (
display: inline-block;
text-decor: niciuna;
margine-dreapta: 7px;
chenar-rază: 5px;
umplutură: 7px 9px;
fundal: #199a36;
culoare: #fbf7f7 !important;
}
anelumen (
display: flex;
poziție: fixă;
stânga: 0;
sus: -100%;
latime: 100%;
inaltime: 100%;
alinierea elementelor: centru;
justificare-conținut: centru;
opacitate: 0;
-webkit-tranziție: top 0s .7s, opacitate .7s 0s;
tranziție: top 0s .7s, opacitate .7s 0s;
}
Anelumen:țintă (
sus: 0;
opacitate: 1;
-webkit-tranziție: niciuna;
tranziție: niciuna;
}
Figura anelumenului (
latime: 100%;
lățime maximă: 530px;
poziție: relativă;
umplutură: 1,8 em;
opacitate: 0;
culoare de fundal: alb;
-webkit-tranzitie: opacitate .7s;
tranziție: opacitate .7s;
}
Anelumen.lowingnuska figura (
fundal: #f9f5f5;
chenar-rază: 7px;
padding-top: 8px;
chenar: 3px solid #aaabad;
}
Anelumen.lowingnuska figura h2 (
margine-top: 0;
umplutură-partea de jos: 3px;
chenar-jos: 1px solid #dcd7d7;
}
Anelumen: cifră țintă (
opacitate: 1;
}
Anelumen.lowingnuska.compatibg-ukastywise (
text-decor: niciuna;
poziție: absolută;
dreapta: 8px;
sus: 0px;
dimensiunea fontului: 41px;
}
Anelumen.nedismiseg (
stânga: 0;
sus: 0;
latime: 100%;
inaltime: 100%;
poziție: fixă;
culoare de fundal: rgba(10, 10, 10, 0,87);
continut: "";
cursor: implicit;
vizibilitate: ascuns;
-webkit-tranziție: toate .7s;
tranziție: toate .7s;
}
Anelumen:target .nedismiseg (
vizibilitate: vizibil;
}
De asemenea, trebuie să știți că stilul CSS și pseudo-clasa sunt una dintre cele care nu sunt utilizate pe deplin de Caracteristici CSS cu multe aplicații potențiale interesante.
Începe când adresa URL pagina corespunde cu identificatorul elementului său, sau îl puteți spune diferit, acesta este momentul în care utilizatorul sare la element specific Pe pagina.
Salutare tuturor! In aceea o mica lectie Vom crea o fereastră modală simplă, dar puternică, folosind CSS pur. Și în același timp vom repeta (și pentru cine vom deschide) așa ceva lucru util ca flexbox. În acest caz, vom crea nu doar o fereastră modală care se deschide la clic, dar care este poziționată exact în centrul ecranului. Cândva, acest lucru se putea face doar folosind javascript, dar timpul trece și acum acest lucru se poate face cu literalmente 4 linii de cod.
Deschideți fereastra modală
Conținut în interiorul ferestrei
Întreaga fereastră modală constă din două straturi - primul strat, care are clasa ModalWindow, întunecă întregul spațiu din jurul ferestrei modale și va alinia conținutul ferestrei la centrul ecranului. Al doilea strat este de clasă Corpul_modal— conține conținutul ferestrei modale în sine.
Acum să creăm codul CSS pentru acest marcaj:
Modal (poziție: fix; afișare: niciunul; sus: 0; dreapta: 0; jos: 0; stânga: 0; z-index: 0; fundal: rgba(0,0,0,0.7); pointer-evenimente: niciunul ; ) .Modal:target ( display: flex; pointer-events: auto; ) .Modal_Body (poziție: relativ; z-index: 2; display: block; margin: auto; padding: 15px; background: #FFF; ) . ModalFull (poziție: absolut; afișare: bloc; z-index: 0; lățime: 100%; înălțime: 100%; )
Să ne uităm acum la funcționarea ferestrei modale și să înțelegem cum funcționează.
După cum putem vedea, când faceți clic pe „Deschideți fereastra modală”, întreaga fereastră este umbrită, iar o fereastră modală albă apare exact în centru. Să ne oprim aici deocamdată și să ne dedicăm teoriei.
Deoarece am fost de acord să nu folosim javascript și nu îl putem folosi pentru a urmări clicurile pe elemente, putem face acest lucru cu ușurință folosind o pseudo-clasă css și un link de ancorare cu un hash (pentru a indica elementul pe pagina dată) și id cu o valoare care trebuie să fie egală cu indicatorul din link. Uită-te la exemplul nostru: href link-uri și id containerul principal al ferestrei modale au aceeași valoare - ModalWindow. Acest lucru este important deoarece browserul trebuie să înțeleagă ce elemente vor interacționa între ele.
În cazul nostru, containerul general al ferestrei modale este ascuns și, în consecință, întregul conținut al ferestrei modale este ascuns. Dar când se face clic pe link, elementul primește o pseudo-clasă :ţintăși apare în consecință. Uită-te în codul css - proprietate afişa modificări de la nici unul pe contracta. Rețineți că este flex, deoarece cu el ne putem alinia Corpul_modal exact în centrul ecranului. Am scris toate celelalte stiluri pentru el imediat.
Apropo, dacă nu înțelegeți prea bine cum a fost atât de aplatizat pe întreaga suprafață a ecranului, vă voi spune - este vorba despre următoarele 4 linii:
Sus: 0; dreapta: 0; jos: 0; stânga: 0;
Am indicat că ar trebui să fie la pixelul zero din dreapta, stânga, sus și jos în același timp. În schimb, puteți utiliza, de exemplu, următoarea construcție:
Latime: 100%; inaltime: 100vh;
Aici specificăm o lățime egală cu 100% a ecranului, dar este mai bine să setați înălțimea folosind înălțimea ferestrei— înălțimea ferestrei browserului. Voi rămâne la versiunea mea.
O alta nuanță importantă este sensul proprietățile z-index la ModalȘi Corpul_modal. Ei trebuie să fie prezenți și Corpul_modal trebuie să fie cu cel puțin o unitate mai mare ca valoare, altfel conținutul ferestrei modale nu va fi disponibil - linkurile și butoanele nu vor putea fi clicate. Și dacă există conținut cu defilarea, nici acest lucru nu va funcționa, deoarece un element se va suprapune pe altul.
Să continuăm să creăm capodopera noastră. Când faceți clic, apare o fereastră modală, dar nu o putem închide la fel de ușor. Să adăugăm un buton pentru a-l închide:
Conținut în interiorul ferestrei
ÎnchideDe fapt, ea anulează :ţintă pentru fereastra noastră modală și apoi pur și simplu acceptă pozitia de pornire- dispare din vedere. Dar există o oarecare subtilitate cu acest link - când faceți clic pe el, browserul va încerca să găsească un astfel de element, dar nu va eșua și va derula pagina până la început. Acest comportament este unul dintre micile dezavantaje ale acestei abordări de a face ferestre modale, dar poate fi tratat.
Pentru acest atribut href la linkul de la care schimbam «#» pe „#ModalWindowClose”, iar pentru linkul butonului care a deschis fereastra, adăugați un atribut id cu acelasi sens. Puteți utiliza, de asemenea, atributul Nume, dar în HTML5 este mai bine să definiți o ancoră și necesită un atribut id.
Deschideți fereastra modală
Conținut în interiorul ferestrei
ÎnchideAcum, când faceți clic, browserul va reveni la buton. De dragul adevărului, vreau să spun că această ancoră va fi situată de-a lungul marginii de sus a ecranului. Dar, dacă acest buton de deschis este situat în antet sau subsol, atunci această problemă este uniformizată. Și dacă antetul are o poziție fixă, atunci va fi absolut bine - de exemplu, pentru comandă sună din nou sau precomanda/consultația va fi perfectă chiar și atunci când fereastra se închide.
Iată un exemplu de ceea ce am primit:
Puteți modifica puțin mai mult recipientul Corpul_modal- acestea sunt restricții de dimensiune (pentru a nu se întinde în înălțime și lățime). Și încă o mică nuanță - recomand, dacă este posibil, plasarea codului cu o fereastră modală înainte de eticheta de închidere
