Cum se utilizează jQuery pentru a genera o fereastră pop-up modală atunci când se face clic

Cum se utilizează jQuery pentru a genera o fereastră pop-up modală atunci când se face clic

O casetă modală este o fereastră pop-up care forțează utilizatorul să interacționeze cu ea înainte de a reveni pe site. Cutiile modale sunt utile pentru avertismente, cutii informative și multe altele. Puteți crea o casetă modală cu jQuery. Dacă nu sunteți familiarizat cu jQuery, consultați articolul Noțiuni de bază despre jQuery pentru o explicație a modului în care funcționează jQuery.

Aceasta este o afișare interactivă a codului care vă arată HTML, CSS, jQuery și o demonstrație a rezultatului.

HTML modal

Pentru a crea un pop-up modal, trebuie mai întâi să stabiliți structura HTML.

Trebuie să creați clase pentru suprapunerea pop-up și conținutul pop-up, astfel încât să le puteți edita separat de restul documentului.

Acest exemplu creează clasele „popup-overlay” și „popup-content” pentru a permite CSS-ului să o stilizeze în mod specific.

Rețineți elementele buton din acest exemplu. Am adăugat butoane care dorim să declanșeze pop-up-ul. Un buton a primit clasa „open”, în timp ce celălalt are clasa „close”. Acestea vor fi folosite mai târziu pentru a deschide și închide pop-up-ul.

Modal CSS

În CSS, trebuie să stilizați clasele „popup-overlay” și „popup-content” astfel încât acestea să fie inițial ascunse. Un pop-up nu ar fi un pop-up dacă ar fi vizibil încă de la început. Putem ascunde pop-up-ul prin modificarea vizibilității claselor:

.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}

Acum, nu vrem ca pop-up-ul să fie ascuns pentru totdeauna, așa că trebuie să facem un caz de utilizare specială în CSS pentru momentul în care pop-up-ul trebuie să fie afișat. Vom folosi jQuery pentru a ajuta la determinarea momentului în care pop-up-ul ar trebui să fie vizibil.

jQuery are capacitatea de a adăuga și elimina clase pe baza unor acțiuni (cum ar fi click-ul). Astfel, dacă programăm jQuery să adauge o clasă numită „activ” atunci când se face clic pe butonul „deschide”, putem folosi clasa „activ” în CSS pentru a afișa pop-up-ul. Adăugați clasa „active” la clasele pop-up și creați o nouă stilizare pentru momentul în care pop-up-ul este vizibil.

Vezi exemplul de mai jos pentru a vedea cum ar trebui să arate această stilizare CSS:

.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}

Modal jQuery

Acum este timpul să adăugăm jQuery-ul. Asigurați-vă că ați configurat documentul HTML pentru jQuery înainte de a adăuga orice cod jQuery. Dacă nu sunteți sigur cum să faceți acest lucru, consultați articolul nostru Pregătirea HTML-ului pentru jQuery.

Atunci când butoanele HTML „Open” și „Close” sunt apăsate, jQuery trebuie să adauge sau să elimine clasa „active”.

Această primă declarație adaugă clasa „active” atunci când se face clic pe butonul „Open”.

$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});

Când se întâmplă acest lucru, clasa „active” este adăugată la clasele pop-up, schimbând astfel vizibilitatea pop-up-ului în „visible”. Cu alte cuvinte, pop-up-ul va apărea.

Această a doua declarație elimină clasa „active” atunci când se face clic pe butonul „Close”.

$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});

Când se întâmplă acest lucru, clasa „active” este eliminată din clasele pop-up, ceea ce face ca acestea să revină la stilul lor anterior, care are vizibilitatea setată la hidden.

Adaugați ambele declarații de jQuery în documentul dumneavoastră. Dacă toate acestea sunt completate corect, veți avea o casetă pop-up modală rudimentară.