Napravite skočni prozor koristeći HTML, CSS i JavaScript

Dobro dizajnirani skočni prozori čine vašu web stranicu interaktivnijom i modernijom. Oni mogu stvoriti tržišta i povećati prodaju za tvrtke.

Možete stvoriti skočne prozore s HTML-om, CSS-om i JavaScriptom. Upotrijebite sljedeći vodič za stvaranje i stiliziranje skočnog prozora od nule. Vaše web mjesto čini interaktivnim i stvara sjajna korisnička iskustva.

Napišite HTML za strukturiranje sadržaja

Napišimo neki HTML kod koji ima skriveni modalni prozor koji se pojavljuje kada kliknete gumb. U ovom slučaju, prikazat ćete značenje riječi Zdravo! Skočni prozor će imati naslov i nešto sadržaja.

Odmah nakon što pokrenete modalni prozor, na pozadini se pojavljuje mutni efekt. Dodajte klase u odjeljke koje ćete koristiti za odabir modala kasnije u JavaScriptu.

<tijelo>
<dugmerazreda="otvoreno-modalno">Zdravo!dugme>
<divrazreda="modalni-sadržaj skriveni-modalni">





instagram viewer

<divrazreda="modalno-zaglavlje">
<h3>Značenje riječi Zdravo!h3>
<dugmerazreda="blisko modalno">×dugme>
div>

<divrazreda="modalno tijelo">
<str>Hello je pozdrav na engleskom jeziku. Koristi se kod
 početak rečenice kao uvod bilo osobno ili
 na telefonu.str>
div>
div>
<divrazreda="blur-bg skriveno-zamućenje">div>
<skriptasrc="script.js">skripta>
tijelo>

Stranica bi trebala izgledati ovako:

Također možete istražiti HTML dijaloški element ako želite koristiti najviše semantičkog označavanja.

Napišite CSS za dodavanje stila

Koristite CSS za oblikovanje skočnog prozora. Postavite prozor u središte web-stranice na crnoj pozadini tako da bude jasno vidljiv. Također ćete stilizirati prozor, njegovu pozadinu i veličinu fonta.

Najprije stvorite jedinstveni stil za cijelu stranicu postavljanjem margine, ispune i visine retka. Zatim poravnajte elemente tijela u sredini na stražnjoj pozadini.

* {
margina: 0;
podstava: 0;
dimenzioniranje kutije: rubni okvir;
linija-visina: 1;
}
tijelo {
visina: 100%;
prikaz: savijati;
opravdati-sadržaj: centar;
flex-direction: stupac;
align-items: centar;
pozadina: #000;
praznina: 30px;
}

Zatim stilizirajte otvoreno-modalni dugme. Dajte mu drugu boju pozadine od ostatka stranice tako da se ističe. Također, postavite boju fonta, veličinu, ispunu i vrijeme prijelaza.

.otvoreno-modalni {
pozadina: #20c997;
boja: #F F F;
granica: nikakav;
podstava: 20px 40px;
veličina fonta: 48px;
granični radijus: 100px;
kursor: pokazivač;
tranzicija: svi 0.3s;
obris: nikakav;
}
.otvoreno-modalni:aktivan {
transformirati: prevestiY(-17px);
}

Zatim stilizirajte modalni sadržaj koji će se prikazati kada se prozor otvori. Postavite bijelu pozadinu, dajte joj manju širinu od tijela i dodajte ispunu.

Također mu dodijelite z-indeks kako bi se pojavio ispred otvoreno-modalni dugme. Dodatno, postavite skriveno-modalni prikazati kao nijedan, tako da ostaje skriven dok ga ne aktivirate.

.modalni-sadržaj {
pozadina: #ccc;
širina: 500px;
podstava: 20px;
granični radijus: 10px;
z-indeks: 99;
}
.modalno-zaglavlje {
prikaz: savijati;
opravdati-sadržaj: razmak između;
margina-dno: 16px;
boja: #000;
veličina fonta: 30px;
}
.modalno-tijelostr { 
veličina fonta: 22px;
linija-visina: 1.5; 
} 
.skriveno-modalni { 
prikaz: nikakav; 
}

Zatim stilizirajte bliskomodalni gumb s prozirnom pozadinom i poravnajte ga u sredini.

.bliskomodalni {
pozadina: transparentan;
granica: nikakav;
prikaz: savijati;
align-items: centar;
opravdati-sadržaj: centar;
visina: 20px;
širina: 20px;
veličina fonta: 40px;
}
.bliskomodalni:lebdjeti {
boja: #fa5252;
}

Na kraju, stilizirajte element zamućenja koji će baciti pozadinu kada se prozor otvori. Imat će maksimalnu visinu i širinu te pozadinski filtar. Postavite zamućenje na ništa, tako da nije vidljivo dok se prozor ne otvori.

.blur-bg {
položaj: apsolutni;
vrh: 0;
lijevo: 0;
visina: 100%;
širina: 100%;
pozadina: rgba(0, 0, 0, 0.3);
pozadina-filter: zamutiti(5px);
}
.skriveno-zamućenje {
prikaz: nikakav;
}

Nakon dodavanja CSS-a, stranica bi trebala izgledati ovako:

Kontrolirajte skočni prozor pomoću JavaScript koda

Koristit ćete JavaScript za otvaranje i zatvaranje modalnog prozora prikazivanjem ili skrivanjem. Dodati slušatelji događaja na gumb kako biste pokrenuli njegovo otvaranje i zatvaranje kada ga kliknete.

Prvo odaberite relevantne elemente koristeći CSS klase koje ste definirali u HTML-u:

neka modalniSadržaj = dokument.querySelector(".modalni-sadržaj");
neka openModal = dokument.querySelector(".open-modal");
neka closeModal = dokument.querySelector(".close-modal");
neka zamutitiBg = dokument.querySelector(".blur-bg");

Dodajte slušatelja događaja u otvoreno-modalni gumb tako da otvara prozor kada ga kliknete.

openModal.addEventListener("klik", funkcija () {
 modalContent.classList.remove("skriveno-modalno");
 blurBg.classList.remove("skriveno zamućenje");
});

Izvršite suprotne radnje za zatvaranje skočnog prozora, ali ovaj put ih zamotajte u imenovanu funkciju. Ovo će upravljati ponašanjem za više događaja koji mogu uzrokovati zatvaranje modalnog prozora:

neka closeModalFunction = funkcija () {
 modalContent.classList.add("skriveno-modalno")
 blurBg.classList.add("skriveno zamućenje")
}

Dodajte slušatelje događaja za rukovanje klikovima na pozadinu ili gumb za zatvaranje i slučaj kada korisnik pritisne tipku Escape.

blurBg.addEventListener("klik", closeModalFunction);
closeModal.addEventListener("klik", closeModalFunction);
dokument.addEventListener("ključ", funkcija (događaj) {
ako (događaj.ključ "Pobjeći"
 && !modalContent.classList.contains("skriven")
 ) {
 closeModalFunction();
 }
});

Sada, kada kliknete na Zdravo! pojavljuje se modal. Možete ga zatvoriti klikom na gumb Odustani na desnoj strani prozora. Vidi kod na codepen.io i komunicirati s modalom:

Upotreba skočnih prozora

Glavna upotreba skočnih/modalnih prozora u web razvoju je usmjeravanje fokusa na određenu stavku na web mjestu. Nakon što se pokrene, deaktivira ostatak stranice potičući korisnika da obrati pozornost na nju.

Skočni prozori animiraju vaše korisničko sučelje. Oni mogu upozoriti i skrenuti pozornost na važne informacije na web stranici za vaše korisnike. Da bi uklonio prozor, korisnik mora izvršiti neku radnju. Na ovaj način korisnik može komunicirati s prozorom i dobiti željene informacije.