Noi facem vsplvayuschee fereastra
Oh, aceste ferestre ...
Cu siguranță fiecare dintre voi, cel puțin o dată, pe internet, am întâlnit pop-up-uri. Nu, nu cele care deschid o fereastră nouă sau o filă a browser-ului, și cele care apar pe pagina curentă.
Treci la subiect ...
În acest articol, ne vom gândi despre cum să pună în aplicare mecanismul de ferestre pop-up, și să-l utilizați în proiectul dumneavoastră.
planul de acțiune
- Crearea unei structuri HTML de ferestrele noastre
- Styling cu CSS3
- Să ne dea mișcarea, folosind jQuery
cuvinte de despărțire
Vom crea o structură de cutie (HTML), ascunde-l de utilizator (CSS) și în anumite condiții (evenimente) afișate pe pagina (jquery).
Planul de viitor pe puncte
Înainte de a începe crearea structurii HTML a ferestrelor noastre, aveți nevoie pentru a decide ce vrem în această fereastră pentru a prezenta utilizatorilor noștri.
Alegerea mea a căzut pe o formă de utilizatori de abonament.
Pasul 1. Crearea unei structuri HTML a ferestrelor noastre
Nostru Popup-fereastră este format din trei părți principale: pp-header - zona de antet, pp conținut - partea principală, pp-subsol - partea de jos a ferestrei, sub forma de abonament.
Se umple caseta de conținut pop-up:
Fiți atenți la
Această unitate va face fereastra de browser-ul dvs. umple fundal gri translucid.
Pasul 2. Lista de stiluri pentru fereastra pop-up
Centrare fereastra noastră față fereastra browser-ului și a ascunde marginile limita superioară. Noi definim elementele de bază și dimensiunile de stilizare icoane FontAwesome
Să ne dea mișcarea, folosind jQuery
Aici ne ascundem poziționarea noastră fereastră în sus, la înălțimea blocului și anima aspectul neted atunci când se încarcă pagina
Aici este un astfel de exemplu simplu dovedit.
În cazul în care acest exemplu este legat de evenimentul de retragere a cursorului mouse-ului la fereastra paginii, și se întâmplă de obicei, atunci când încercați să închideți site-ul, este posibil să se încheie o astfel de fereastră cu un apel către vizitatorii să rămână pe pagina, oferind în oferta de retur (informații).
Puteți lega, de asemenea, cookie-urile și să emită o notificare cu privire la acțiunea de pe primele vizite ale utilizatorilor site-ului.
În opțiuni scurt pentru a aplica în greutate!