Mai întâi trebuie să resetați browserul CSS și să importați fonturi suplimentare. Voi folosi Open Sans și Varela Round. care sunt disponibile în Google Font.
Importați fonturi pentru Google:
Resetați în mod implicit stilurile CSS și site-urile:
Stilurile de secțiuni ale corpului și HTML pot fi modificate la discreția lor, aceasta va avea un efect redus asupra formularului de intrare creat și ferestrei pop-up a jQuery.
Apoi trebuie să vă conectați la pagina jQuery. Folosesc o referință la jQuery. dar puteți utiliza versiunea locală.
Crearea unei suprapuneri CSS
Mai întâi, trebuie să creați un element suprapus și un container pentru formularul de intrare.
Suprapunerea adaugă o nuanță neagră restului conținutului paginii, evidențiind astfel blocul dorit. Acesta este un simplu efect CSS. utilizând poziționarea și culoarea de fundal.
Din moment ce stilurile sale sunt împărțite în două părți principale, le voi explica separat.
Mai întâi, luați în considerare poziționarea și adăugarea culorii:
Să analizăm acest cod:
- fundal-culoare: rgba (0,0,0, .25) - utilizarea RGBA vă permite să specificați culoarea și valoarea alfa, alfa este opacitatea culorii;
- fund: 0 - poziționați elementul din partea de jos a paginii;
- stânga: 0 - poziționați elementul din stânga paginii;
- position: fix - când pagina este derulată, poziția elementului nu se schimbă;
- top: 0 - poziționați elementul din partea de sus a paginii;
- lățime: 100% - elementul umple toată lățimea paginii.
A doua parte include flexbox CSS3. care simplifică foarte mult poziționarea elementelor în interiorul containerului. Să vedem:
Notă. La momentul acestei scrieri, flexbox-ul nu a fost acceptat pe deplin în toate browserele majore. Dacă doriți să acoperiți numărul maxim de browsere, trebuie să utilizați prefixele:
Stiluri de panouri de intrare pentru HTML și CSS
Acum avem un container și trebuie să plasăm formularul de autentificare creat în el. O caracteristică comună a formelor similare cu fereastra pop-up jQuery este o graniță semi-transparentă. Utilizăm elementul container pentru a obține acest efect, dar puteți folosi marginea pentru a obține același lucru:
Majoritatea proprietăților CSS sunt evidente. Folosind valoarea rgba, setăm din nou culoarea de fundal, ceea ce dă un efect opac frumos. raza radială specifică colțurile rotunjite ale containerului pentru forma de intrare.
O proprietate care necesită o explicație este alinierea. deoarece este destul de nou. Acest lucru se datorează flexboxului. alinierea automată determină alinierea orizontală a elementului și am setat alinierea exact în centru.
Apoi, accesați zona de conținut. Până acum ne-am ocupat doar de fundaluri semi-transparente, așa că este timpul să folosim ceva solid:
Folosim un fundal alb solid, deci doar rgb a fost folosit in loc de rgba. Indentarea a 24 de pixeli poate fi modificată la discreția dvs.
O parte importantă a acestei reguli este definirea poziției. Acest lucru este necesar atunci când utilizați elemente absolut poziționate în interiorul containerului - acesta va fi butonul închis.
Acum trebuie să creați un antet (h3) în interiorul panoului de intrare:
Pentru a selecta un titlu, folosesc un font rotund negru cu o dimensiune de 1,8 em. Utilizarea lui 1.8 em stabilește dimensiunea fontului în raport cu fontul documentului. Aceasta se numește elasticitatea fontului.
Creați un buton de închidere
Înainte de a face o fereastră pop-up, trebuie să creați un buton pentru a închide formularul de autentificare. Acest lucru se face după cum urmează:
Iată explicația codului:
- culoarea de fundal - folosim un fundal gri frumos;
- raza de graniță - pe măsură ce creăm un cerc, avem nevoie ca raza de curbură a colțurilor frontierei să fie de 50% din înălțime;
- poziția: poziția absolută - absolută a butonului / linkului, dar întrucât poziția relativă este stabilită pentru container, pozițiile tuturor elementelor sunt setate în raport cu acesta;
- top - distanța de la partea de sus a formei de intrare - rem - dependența relativă care este legată de dimensiunea fontului;
- tranziție - stabilește animație pentru toate proprietățile, folosește ușurința de 400 ms;
- dreapta - distanța de la marginea din dreapta a ecranului la forma de intrare.
Al doilea bloc folosește selectorul: hover. Acesta îi spune browserului ce trebuie să facă atunci când utilizatorul se deplasează peste element. În acest caz, butonul devine verde și indicatorul mouse-ului își schimbă aspectul.
Crearea formularului de autentificare
În curând vom trece la fereastra pop-up HTML. Între timp, formatul CSS al formularului de intrare:
Mai întâi, am definit stilurile pentru etichetele formularului. Datorită acestui lucru, utilizatorul poate face clic pe text și poate accesa câmpul de formular corespunzător. Elementul de etichetare funcționează direct cu ID-ul de date.
Înainte de a face fereastra pop-up HTML. creăm elemente de introducere a datelor pentru formular. Am specificat o umbră cutie. Pentru a le crea o umbra interioară frumoasă.
Utilizarea selectorului: focalizarea vă permite să specificați modul în care se vede elementul de intrare atunci când utilizatorul a plasat cursorul în el. Este necesar să se arate clar că elementul este selectat în prezent.
În final, setăm stilurile utilizând selectorul CSS: nevalid. Atunci când un utilizator introduce date care nu se potrivesc cu un model dat, elementul de intrare va fi afișat utilizând aceste stiluri.
Butoane de conectare pentru conectare
Butoanele stilurilor nu conțin nimic nou:
Pentru buton, am setat un fundal albastru frumos, cu un cadru închis translucid. Această metodă vă permite să nu modificați culoarea de margine când modificăm culoarea de fundal. De asemenea, setăm butonul pentru animația de tranziție standard CSS când schimbăm culoarea de fundal.
În ceea ce privește butonul de închidere a ferestrei, vom seta schimbarea culorii de fundal atunci când plasăm cursorul mouse-ului astfel încât butonul să poată fi făcut clic.
Introduceți formularul HTML
Până acum, toate explicațiile legate de stilurile CSS. Acum este momentul să aruncăm o privire scurtă asupra marcajului. Inclusiv fereastra pop-up HTML.
Formularul utilizează elemente HTML 5. Asigurați-vă că doctype-ul este setat corect:
HTML complet al formularului de autentificare:
Când utilizați această metodă pentru întregul site, trebuie să plasați codul în interiorul elementului corpului.
Este necesar să înfășurați funcția jQuery într-o funcție încărcată după ce documentul este gata. Aceasta împiedică decelerarea:
Pentru a crea un efect de dizolvare, folosim metoda jQuery fadeToggle. Este mult mai ușor să animați elementele.
Utilizăm fadeToggle când dăm clic pe linkul de conectare. Pentru a face acest lucru, avem nevoie de evenimentul jQuery clic:
Codul de mai sus pornește funcția închisă când faceți clic pe un element cu identificatorul loginLink. Pentru a-i spune ce trebuie să facă atunci când elementul este apăsat, trebuie să faceți următoarele:
Utilizarea funcției jQuery prevenDefault () permite oprirea comunicării cu redirecționarea utilizatorului. Acest lucru oferă funcționalitate dezvoltatorilor care pot face referire la pagina de conectare:
Cu această funcție simplă, vom duplica funcționalitatea pentru a închide fereastra.
În fereastra pop-up JS, faceți-o astfel încât utilizatorul să apese tasta ESC pentru a închide fereastra:
Este important să rețineți că această funcție este folosită în cazul if. Operatorul verifică dacă utilizatorul a apăsat tasta ESC (codul cheie 27).
Deoarece nu vrem ca utilizatorul să deschidă fereastra utilizând tasta ESC. Trebuie să verificați dacă fereastra suprapusă este afișată sau nu.
Iată tot codul jQuery:
AJAX și HTML 5
Ce se întâmplă dacă doriți să faceți această formă și mai bună? Puteți include un formular de înregistrare în acesta. Iată cum puteți face acest lucru fără a duplica codul cu interogarea JQuery AJAX GET:
Am creat o nouă clasă pentru formularul de autentificare și un link pentru înregistrare numit "overlayLink". După ce utilizatorul face clic pe acest element, funcția este lansată.
Vrem ca link-urile să nu facă nimic altceva. Utilizăm preventDefault () pentru a face acest lucru. Apoi, trebuie să aflați ce pagină trebuie să extrageți. Acest lucru este indicat în acțiunea de date a atributului HTML.
Acum primim codul paginii / formularului specificat sau fereastra pop-up HTML. Pagina care corespunde link-ului clicat trebuie să fie în pachetul ajax / pachet. Apoi, rezultatul este plasat în elementul cu conținut de autentificare din clasă.
Codul paginii ajax / login-form.html va arăta astfel:
Link-urile pentru a apela cererea AJAX vor arăta astfel:
Apoi puteți crea fișierul ajax / registration-form.html:
Concluzie și codul complet
Vă mulțumesc pentru atenție. Astăzi am învățat cum să facem o fereastră pop-up. Sper că acest ghid sa dovedit util. Iată codul complet:
Traducerea articolului "Creați o casetă de conectare HTML popup cu jQuery" de către o echipă prietenoasă a proiectului Construirea de site-uri de la A la Z.