Modal fereastră cu CSS și jQuery
Vorbind despre diverse tehnici de construire a site-urilor, ar fi ridicol să nu spui despre unele modalități de a crea ferestre modale. Nu vom discuta despre scopul, utilitatea și problemele emergente ale utilizării ferestrelor pop-up, modale. Să analizăm doar unul dintre numeroasele exemple de a crea astfel de ferestre.
Există situații în care nu există posibilitatea de a utiliza plug-in-uri speciale, de exemplu, cum ar fi fancybox și prettyPhoto. astfel încât ar trebui să înțelegeți cum vă puteți crea propria fereastră modală.
Să vedem cum să facem acest lucru:
Să începem prin adăugarea cu următoarele atribute:
- href - #? w = 500 specifică lățimea ferestrei
- rel - atribut unic pentru fiecare fereastră
- class = "poplight" - clasa pentru a afișa o fereastră pop-up
Vedeți fereastra în acțiune - Lățime = 500px
Apoi, trebuie să creați un markup încorporat pentru fereastra pop-up. Puteți plasa oriunde pe pagină, de exemplu, în partea de jos a conținutului. Rețineți că identificatorul pop-up corespunde atributului rel al etichetei
Aceasta va lega împreună link-ul și fereastra pop-up.
antet
Orice text doriți
Și astfel, odată cu plasarea ferestrei noastre pe pagină, ne-am dat seama, acum să o aranjăm cu stiluri, să-i dăm, ca să spunem așa, un aspect decent.
CSS Layout
Pentru claritate, am scris câteva explicații privind parametrii stilului ferestrei noastre. Deoarece ferestrele pop-up pot avea mărimi diferite, nu specificăm popup_block în CSS de la marginea ferestrei, se calculează dimensiunea necesară, aceasta este doar sarcina pentru jQuery.
Odată cu formarea ferestrei și a aspectului ei folosind CSS, cred că nu vor exista dificultăți speciale. Stilurile pot fi scrise direct pe pagina HTML, între etichete
și . și puteți reda un fișier separat al stilurilor dvs., de obicei un fișier stil.css. sau ceva de genul asta.Configurarea JQuery
Pentru funcționarea completă a ferestrei modale, trebuie să vă conectați jQuery, care nu este familiarizat cu activitatea acestei biblioteci, poate citi JQUERY - INTRODUCERE.
Ei bine, vom merge mai departe. Puteți descărca ultima versiune de JQuery de pe site-ul bibliotecii sau puteți utiliza un fișier separat plasat în adâncurile Google, conectându-l la document, în secțiune înainte de eticheta de închidere