Creați fereastra pop-up jquery

Ce vom crea?

In acest tutorial vom crea o fereastra pop-up simplu și frumos pe jquery. Acesta va fi similar cu ceea ce se utilizează în stare de nervozitate. Desigur, puteți face stilul care vă place.

Ce funcționalitate va avea o fereastră?

• Ne dorim ca aceasta este centrată pe pagină a site-ului, în derivarea.
• Trebuie să existe un buton de „închidere“, sau ceva de genul asta.
• Când facem clic în afara blocului - fereastra pop-up se va închide automat.
• Când se afișează fereastra, pagina trebuie să fie acoperite de o umbră, astfel încât utilizatorul se poate concentra pe.

Să înceapă să se dezvolte

Pentru a pune în aplicare fereastra pop-up vom folosi CSS și câteva linii de cod jQuery, bine, merge fără HTML. Rețineți că, pentru realizarea ideilor noastre nu au nevoie de nici un plug-in-uri și instrumente suplimentare, este foarte ușor și sigur!

Creați un link către o clasă specifică și blocul div cu același ID. Iată cum:

Notați numele de referință de clasă și bloc div id au aceeași valoare. Aceasta este pentru conectarea acestor elemente. Înainte de a trece la scrierea de cod jQuery, adăugați unele stiluri de css pentru fereastra.

fereastra pop-up cod jQuery

Pentru a începe, conectați fișierul bibliotecă jQuery. După aceea, am inițializa jQuery și adăugați div #blackout în corpul documentului. De asemenea, defini lățimea ferestrei pop-up.

Apoi, creați o funcție care centrele fereastra. Anterior, am stabilit poziționarea absolută în CSS, nu putem folosi margin: 0px auto; avem nevoie pentru a defini lățimea ecranului pentru a ține departe de această lățimea ferestrei pop-up, și este totul împărțit la 2. Înălțimea este poziția curentă a sulului, plus undeva 150px.

Un pic mai devreme am creat #blackout div, este de a acoperi conținutul paginii umbra. Acum trebuie să ne asigurăm că această unitate va avea o lățime și o înălțime a unui monitor identic. De asemenea, este calculată în această funcție.

Această funcție trebuie să fi rulat de 3 ori. În cazul în care utilizatorul folosește defilare atunci când utilizatorul redimensionează fereastra, și inițial, atunci când se încarcă pagina.

Pe aceasta sozdaniepopup cutie najQuery completa! Nu avem nevoie pentru a descărca plug-in-uri și de a scrie funcții complexe, doar câteva linii de cod. Dați clic pe „Demo“ pentru a vedea cum funcționează. Puteți descărca, de asemenea, codul sursă și a vedea modul în care se execută local pe computerul dumneavoastră.

Demo Descărcați codul sursă (0 Mb.)