În acest articol, vom examina modul de creare a unui pop-up simplu HTML:
Mai întâi, vom crea marcajele HTML de bază ale ferestrei modale și link-ul de deschidere:
În codul de mai sus, am creat un link. Apoi am creat o fereastră de auto-pop-up când faceți clic pe linkul HTML.
În pasul următor, trebuie să adăugăm stilurile ferestrei modale:
Înainte de a face o fereastră pop-up în HTML. la stânga pentru a adăuga jQuery. astfel încât acesta să fie afișat când faceți clic pe link și plasat în mijlocul ecranului:
Mai întâi selectăm toate etichetele cu nume = "modal". apoi extrageți link-ul href de la ei. După aceasta, obținem lățimea și înălțimea ecranului pentru a plasa fereastra pop-up în mijloc.
Nu uitați să conectați biblioteca jQuery. altfel nu veți putea crea o fereastră pop-up HTML:
Totul este gata, iar fereastra noastră simplă jQuery modal ar trebui să funcționeze bine.
Configurarea cookie-urilor
Dacă nu doriți ca fereastra pop-up să fie afișată de fiecare dată când încărcați pagina, utilizați modulele cookie. Pentru a face acest lucru, creați un nou fișier numit popup.js. Acesta va conține toate codurile JS și JQuery. Mai întâi, adăugați funcțiile createCookie () la acesta. readCookie () și eraseCookie ():
După aceea, trebuie să modificați codul jQuery pentru fereastra pop-up HTML cu textul și să îl puneți într-o funcție numită myPopup ():
După cum puteți vedea, am eliminat funcția .click (). deoarece fereastra pop-up nu va fi controlată de funcția externă. De asemenea, am eliminat e.preventDefault (). Prin urmare, nu vom folosi linkul pentru a afișa fereastra modală.
După ce am adăugat aceste patru funcții în fișierul popup.js. trebuie să adăugați ultima parte a codului jQuery. care va închide fereastra pop-up HTML.
Totul e gata. Să experimentăm cu funcțiile și să facem fereastra modală să apară numai la fiecare 7 zile. Pentru aceasta, creați o variabilă numită pop-up. care citește cookie-urile cu numele pop-up:
Apoi creați constructul altceva. Pentru a verifica dacă există cookie-uri. Dacă da, nu facem nimic. Altfel, intrăm în buclă, creăm cookie-uri timp de 7 zile și afișează o fereastră pop-up atunci când dă clic pe linkul HTML:
Asta e tot! Am implementat un sistem cookie simplu. Acum puteți șterge următoarea parte din codul HTML. dacă folosim cookie-uri:
Traducerea articolului "Creați un jQuery Modal Window Simple" a fost pregătită de echipa prietenoasă a proiectului Saitostroenie de la A la Z.
Trimiteți-le prietenilor: