Creați o fereastră pop-up folosind HTML, CSS și JavaScript

Ferestrele pop-up bine concepute fac site-ul dvs. web mai interactiv și mai modern. Pot crea piețe și pot crește vânzările pentru companii.

Puteți crea ferestre pop-up cu HTML, CSS și JavaScript. Utilizați următorul ghid pentru a crea și a stila o fereastră pop-up de la zero. Îți face site-ul interactiv și creează experiențe excelente pentru utilizatori.

Scrieți HTML pentru a structura conținutul

Să scriem un cod HTML care are o fereastră modală ascunsă care apare când faceți clic pe un buton. În acest caz, veți afișa sensul cuvântului Buna ziua! Fereastra pop-up va avea un titlu și ceva conținut.

Imediat declanșați fereastra modală, un efect neclar este aruncat pe fundal. Adăugați clase la secțiunile pe care le veți folosi pentru a selecta modalul mai târziu în JavaScript.

<corp>
<butonclasă="modal deschis">Buna ziua!buton>
<divclasă=„modal-conținut ascuns-modal”>





instagram viewer

<divclasă="antet-modal">
<h3>Înțelesul lui Hello!h3>
<butonclasă="modal apropiat">×buton>
div>

<divclasă="corp modal">
<p>Salut este un salut în limba engleză. Este folosit la
 începutul unei propoziții ca introducere fie în persoană sau
 la telefon.p>
div>
div>
<divclasă=„blur-bg hidden-blur”>div>
<scenariusrc=„script.js”>scenariu>
corp>

Pagina ar trebui să arate astfel:

De asemenea, puteți dori să investigați Element de dialog HTML dacă doriți să utilizați cel mai semantic marcaj.

Scrieți CSS pentru a adăuga stil

Utilizați CSS pentru a formata fereastra pop-up. Plasați fereastra în centrul paginii web pe un fundal negru, astfel încât să fie clar vizibilă. De asemenea, veți stila fereastra, fundalul și dimensiunea fontului.

Mai întâi, creați un stil uniform pentru întreaga pagină setând marginea, umplutura și înălțimea liniei. Apoi aliniați elementele corpului la centru pe un fundal din spate.

* {
marginea: 0;
căptușeală: 0;
dimensionarea cutiei: cutie-chenar;
inaltimea liniei: 1;
}
corp {
înălţime: 100%;
afişa: contracta;
justifica-conținut: centru;
flex-direcție: coloană;
alinierea elementelor: centru;
fundal: #000;
decalaj: 30px;
}

Apoi, stilați deschis-modal buton. Dați-i o culoare de fundal diferită de restul paginii, astfel încât să iasă în evidență. De asemenea, setați culoarea fontului, dimensiunea, umplutura și un timp de tranziție.

.deschis-modal {
fundal: #20c997;
culoare: #fff;
frontieră: nici unul;
căptușeală: 20px 40px;
marimea fontului: 48px;
hotar-raza: 100px;
cursor: indicator;
tranziție: toate 0.3s;
contur: nici unul;
}
.deschis-modal:activ {
transforma: traduceY(-17px);
}

Apoi, stilați conținutul modal care se va afișa când se deschide fereastra. Setați un fundal alb, acordați-i o lățime mai mică decât corpul și adăugați căptușeală.

Dați-i și un index z, astfel încât să apară în fața lui deschis-modal buton. În plus, setați ascuns-modal se afișează ca niciunul, așa că rămâne ascuns până când îl declanșați.

.conţinut-modal {
fundal: #ccc;
lăţime: 500px;
căptușeală: 20px;
hotar-raza: 10px;
indicele z: 99;
}
.modal-antet {
afişa: contracta;
justifica-conținut: spațiu-între;
margine-fond: 16px;
culoare: #000;
marimea fontului: 30px;
}
.modal-corpp { 
marimea fontului: 22px;
inaltimea liniei: 1.5; 
} 
.ascuns-modal { 
afişa: nici unul; 
}

Apoi stilați apropiat-modal butonul cu fundal transparent și aliniați-l în centru.

.aproape-modal {
fundal: transparent;
frontieră: nici unul;
afişa: contracta;
alinierea elementelor: centru;
justifica-conținut: centru;
înălţime: 20px;
lăţime: 20px;
marimea fontului: 40px;
}
.aproape-modal:planare {
culoare: #fa5252;
}

În cele din urmă, stilați elementul de estompare care se va proiecta pe fundal atunci când se deschide fereastra. Va avea înălțime și lățime maximă și un filtru de fundal. Setați estomparea ca niciuna, astfel încât să nu fie vizibilă până când fereastra nu se deschide.

.blur-bg {
poziţie: absolut;
top: 0;
stânga: 0;
înălţime: 100%;
lăţime: 100%;
fundal: rgba(0, 0, 0, 0.3);
filtru de fundal: estompa(5px);
}
.ascuns-blur {
afişa: nici unul;
}

După adăugarea în CSS, pagina ar trebui să arate astfel:

Controlați fereastra pop-up cu cod JavaScript

Veți folosi JavaScript pentru a deschide și a închide fereastra modală afișând-o sau ascunzând-o. Adăuga ascultători de evenimente la butonul pentru a declanșa deschiderea și închiderea când faceți clic pe el.

Mai întâi selectați elementele relevante folosind clasele CSS pe care le-ați definit în HTML:

lăsa modalContent = document.querySelector(„.modal-conținut”);
lăsa openModal = document.querySelector(„.deschis-modal”);
lăsa closeModal = document.querySelector(„.modal apropiat”);
lăsa blurBg = document.querySelector(„.blur-bg”);

Adăugați un ascultător de evenimente la deschis-modal astfel încât să deschidă fereastra când faceți clic pe el.

openModal.addEventListener("clic", funcţie () {
 modalContent.classList.remove("ascuns-modal");
 blurBg.classList.remove(„blur ascuns”);
});

Efectuați acțiunile opuse pentru a gestiona închiderea pop-up-ului, dar, de data aceasta, includeți-le într-o funcție numită. Aceasta va gestiona comportamentul pentru mai multe evenimente care pot determina închiderea ferestrei modale:

lăsa closeModalFunction = funcţie () {
 modalContent.classList.add("ascuns-modal")
 blurBg.classList.add(„blur ascuns”)
}

Adăugați ascultători de evenimente pentru a gestiona clicurile pe fundal sau butonul de închidere și cazul în care utilizatorul apasă tasta Escape.

blurBg.addEventListener("clic", closeModalFunction);
closeModal.addEventListener("clic", closeModalFunction);
document.addEventListener("Tasta în jos", funcţie (eveniment) {
dacă (cheia.evenimentului "Evadare"
 && !modalContent.classList.contains("ascuns")
 ) {
 closeModalFunction();
 }
});

Acum, când faceți clic pe Buna ziua! butonul, apare modalul. Îl puteți închide făcând clic pe butonul de anulare din dreapta ferestrei. Vezi codul pe codepen.io și interacționează cu modalul:

Utilizări ale ferestrelor pop-up

Principala utilizare a ferestrelor pop-up/modale în dezvoltarea web este de a pune accentul pe un anumit articol de pe site. Odată declanșat, dezactivează restul paginii solicitând utilizatorului să-i acorde atenție.

Ferestrele pop-up îți animă interfața de utilizare. Aceștia pot alerta și atrage atenția asupra informațiilor importante de pe pagina web pentru utilizatorii dvs. Pentru a elimina fereastra, utilizatorul trebuie să efectueze un fel de acțiune. În acest fel, utilizatorul poate interacționa cu fereastra și obține informațiile dorite.