cu id și clasă:
Extindeți-l pentru întreaga lățime și înălțime a documentului, adăugați transparență, poziționare fixă și un z-index mare pentru a suprapune toate elementele de pe pagină - un z-index mai mare ar trebui să fie doar în fereastra pop-up:
Rețineți că una dintre proprietățile cheie este poziția: fixată. astfel încât fundalul întunecat să treacă prin derularea paginii. Prin urmare, această metodă nu va funcționa în IE6 - nu suportă această caracteristică și va trebui să se adreseze JS pentru ajutor. Dar am lăsat deja browserul singur, nu?
Și un alt moment - transparența încrucișată cu browser-ul pe care îl pun în continuare în aplicare prin jQ, în IE a existat un mic defect la afișarea unui bloc ascuns.
Rezultatul muncii efectuate, fără scripturi:
JQuery scripturi
Funcționalitatea de bază
Să activați fereastra noastră, o vom implementa de îndată ce apare un eveniment, de exemplu prin clic pe mouse. Adăugați în document textul, când faceți clic pe care va apărea fereastra:
Faceți clic aici pentru a deschide o fereastră pop-up
Să începem pop-up-ul scriptului nostru:
Mai întâi, ascundeți fereastra și adăugați transparență încrucișată la container cu fundalul:
Desigur, puteți ascunde elementele necesare cu afișarea proprietății CSS: nici una. dar când JS este oprit, nu vom putea deschide fereastra. Deși totul depinde de sarcină.
Pentru comoditatea utilizatorului, puteți adăuga la mesajul de marcare celor care au JS off, ceva de genul:
Următorul pas este închiderea handler-ilor pentru evenimentul clic pe elemente # clic-me pentru a afișa fereastra și # btn-close, # hide-layout. respectiv pentru ascundere. Folosim metodele gata fadeIn / fadeOut:
De asemenea, trebuie să agățați agenți de manipulare pe butoanele de selecție, faceți clic pe o anumită acțiune, după executarea din nou ascundeți fereastra:
După cum puteți vedea, cu ajutorul jQuery totul este pur și simplu urât. Chiar și bunicul tău va analiza acest cod.
Funcționalitate avansată - centrarea ferestrei în centrul paginii
Acum, totul funcționează așa cum ar trebui, dar vom face altceva, și anume centrarea ferestrei în mijlocul paginii pe jQ. Din nou, se poate face cu CSS obișnuit, dar JS / jQuery vă permite să faceți totul mai flexibil - calculați dinamic dimensiunea ferestrei și a elementului și înlocuiți coordonatele necesare, punându-le într-o funcție simplă:
O atenție deosebită trebuie acordată valorilor coordonatelor stângi și superioare. în care se calculează lățimea / înălțimea ferestrei browserului, se scade lățimea / înălțimea elementului primit de la ea și se împarte valorile primite cu două - acesta va fi centrul paginii. Pentru parametrul funcției, adăugați elementul #popup. Rămâne să faceți modificări în cod - apelați funcția de la începutul scriptului și, de asemenea, agățați-l pe mânerul de redimensionare (redimensionarea ferestrei) a obiectului ferestrei. astfel încât fereastra să fie mereu centrată. Cod complet:
Potrivit comentariului cititorilor pentru fereastra pop-up, derularea documentului nu a fost luată în considerare. Pentru a face ca fereastra noastră să meargă în sus și în jos atunci când derulați, trebuie doar să adăugați poziția: element fix la elementul .popup.
Vă mulțumim utilizatorilor Andrew și ebragim.
Evaluarea articolelor
Andrew, se poate face mult mai ușor: face pentru o poziție fereastră pop-up: fixă
D, astfel de ferestre, de obicei, nu afișează o mulțime de informații, așa că lăsați-o să stea așa cum substratul întunecat este întotdeauna în centru. Și dacă doriți să obțineți o mulțime de informații dintr-o dată - este mai bine să o puneți într-o pagină separată. Sau ascundeți informațiile pe măsură ce tastați, cum ar fi fereastra de verificare a magazinului: solicitați informații personale utilizatorului și ascundeți, deschideți a doua fereastră etc.
Mulțumesc, am luat ca scenă scenariul tău. Cu toate acestea, atunci când a fost implementat, sa constatat că derularea în funcția de centrare nu a fost luată în considerare. Prin urmare, a trebuit să modificăm puțin calculul coordonatelor de înălțime:
top: $ (document) .scrollTop () + ($ (fereastra) .height () - elem.height ()) / 2 +
bine și, ca o consecință, pentru a calcula scrollTop în momentul în care a fost apelată fereastra, a trebuit să amânam executarea centrarelor și centrarea când redimensionăm butonul "click-me". În același manipulator a fost adăugată încă o linie, astfel încât să nu ruleze la executarea #popup:
bine, și anulând pe handler "# btn-close, # hide-layout":
Andrew, mulțumesc pentru cercetare și pentru împărtășirea rezultatelor, va trebui să finalizăm articolul. Au existat idei despre implementarea ferestrei și mai flexibil, va exista timp - voi adăuga.
Articole similare