Pop-up (modal) fereastră html și css

anterior ◈ următoarea

Pentru a afișa mesaje importante sau doar modificările făcute pe site-ul, puteți utiliza fereastra pop-up. ferestre pop-up sunt de două tipuri: normale și modal.







Notă: ferestre modale sunt diferite de la normal că în timp ce o fereastră modal este deschisă, utilizatorul nu poate interacționa cu celelalte elemente ale site-ului până în momentul până când închideți fereastra modal.

fereastra pop-up

Primul pas în crearea unei ferestre pop-up este de a crea un element

(Sau orice alt element) și designul său:

acest

si va fi folosit ca o fereastra pop-up. Acum ne-am ascunde folosind proprietatea de afișare la nici unul și adăugați un link, când se face clic, va pop-up:

Folosind pseudo-clasa: țintă vom alege și aplica stiluri de la un element, care a fost efectuat de tranziție. Astfel, după trecerea valorii elementului de afișare de referință

schimbare de la nici unul pentru a bloca.

Acum este necesar să se aranjeze

mijlocul paginii, astfel încât părea că o fereastră pop-up. Asigurați-vă că absolut poziția și centru-l pe verticală și pe orizontală:







Următorul pas va fi de a pune în aplicare o fereastră ascunsă, făcând clic oriunde pe pagina sau pe fereastra in sine. Pentru a face acest lucru, avem nevoie pentru a plasa elementul

în interiorul elementului :

Apoi ne-am poziționa elementul și se întinde pe toată lățimea și înălțimea ferestrei. Cerându-i să afișeze: nici unul; și redirecționa link-ul nostru să-l:

un element

scoate display: none; (Nu mai este necesar, așa cum se ascund acum ). Ca urmare, părintele Acum ascunde pop-up efectuează prin redirecționarea pagina de selecție.

La crearea unei ferestre simplu pop-up este terminat.

modal fereastră

Pentru a crea un pop-up modal ferestre, ia elementul

. legalizeze și adăugați link-ul, atunci când a făcut clic, acesta va apărea:

Următorul pas în crearea unei ferestre de modal cu drepturi depline se va adăuga un buton care va ascunde fereastra noastră. Butonul este realizat din link-uri obișnuite, adăugându-l la nostru