Cum de a face un ferestre modal confortabil pe CSS3 și JavaScript

Bună ziua tuturor. Astăzi vom învăța să facem bine fereastra pop-up modal cu conținutul interior. Toate acestea sunt bune, vom face mai mult pe CSS3 asa noastre ferestrele pop-up nu se va încărca site-ul web. Ei bine, acum să trecem la lecția.

Ι Demo Descărcați

Înainte de a începe ..

Aceste ferestre modale nu sunt atât de greu de făcut, cu atât mai mult încerc să spun cât de mult posibil toate detaliile. Așa cum va fi util la fereastra modal? De exemplu, imaginați-vă că aveți un site web al companiei lor, care nu găzduiește o cantitate mică de informații. Dar pentru a găsi informațiile de care utilizatorul are nevoie pentru a încărca pagina următoare. Dar, desigur, există o cale mai bună afară, a pus toate informațiile din frumoasa fereastra pop-up, utilizatorul nu a avut încă timp să faceți clic pe link-ul ca informațiile necesare se află deja în fața lui. În opinia mea, este decizie foarte convenabil și dreapta.

Plus mai multe dintre aceste ferestre este că acestea pot fi ușor închise, făcând clic pe X în colțul din dreapta sus. Pentru a-mi sună destul de simplu, nu-i așa? Să începem.

HTML markup

Aici am să-ți dau codul care este responsabil pentru construirea de navigare pe pagină. Deci, în mod natural, vom face ei de adaptare.

CSS pentru ferestre pop-up un pic mai complicate, inca de la inceput, avem toate ferestrele sunt ascunse de la ochi, și apoi după ce faceți clic pe link-ul din fereastra apare lin. Tot aici, vom adăuga un fundal întunecat translucid, care va fi afișat împreună cu ferestrele. Și aici vom adăuga un buton pentru a închide ordinea în care utilizatorul poate oricând închide fereastra modal.