Looge hüpikaken HTML-i, CSS-i ja JavaScripti abil

Hästi kujundatud hüpikaknad muudavad teie veebisaidi interaktiivsemaks ja kaasaegsemaks. Nad võivad luua turge ja suurendada ettevõtete müüki.

Hüpikaknaid saate luua HTML-i, CSS-i ja JavaScriptiga. Hüpikakna nullist loomiseks ja kujundamiseks kasutage järgmist juhendit. See muudab teie veebisaidi interaktiivseks ja loob suurepärase kasutajakogemuse.

Sisu struktureerimiseks kirjutage HTML

Kirjutame mõne HTML-koodi, millel on peidetud modaalaken, mis avaneb nupu klõpsamisel. Sel juhul kuvatakse sõna tähendus Tere! Hüpikaknal on pealkiri ja sisu.

Kohe modaalakna käivitamisel tekib taustale udune efekt. Lisage klassid jaotistesse, mida kasutate modaali valimiseks hiljem JavaScriptis.

<keha>
<nuppuklass="avatud modaalne">Tere!nuppu>
<divklass="modaalne sisu varjatud-modaalne">
<divklass="modaalne päis">
<h3>Sõna Tere tähendus!h3>
<nuppuklass="lähedane modaalne">×nuppu>
div>





instagram viewer

<divklass="modaalne keha">
<lk>Tere on ingliskeelne tervitus. Seda kasutatakse kell
 lause algus sissejuhatuseks kas isiklikult või
 telefonis.lk>
div>
div>
<divklass="hägu-bg varjatud-hägu">div>
<stsenaariumsrc="script.js">stsenaarium>
keha>

Leht peaks välja nägema selline:

Samuti võite soovida uurida HTML-i dialoogielement kui soovite kasutada kõige semantilist märgistust.

Stiili lisamiseks kirjutage CSS

Kasutage hüpikakna vormindamiseks CSS-i. Asetage aken veebilehe keskele mustale taustale, et see oleks selgelt nähtav. Samuti saate määrata akna, selle tausta ja fondi suuruse stiili.

Esiteks looge kogu lehe jaoks ühtne stiil, määrates veerise, polsterduse ja rea ​​kõrguse. Seejärel joondage kehaelemendid tagataustale keskele.

* {
marginaal: 0;
polsterdus: 0;
kasti suuruse määramine: ääris-kast;
reakõrgus: 1;
}
keha {
kõrgus: 100%;
kuva: painduv;
õigustama-sisu: Keskus;
painduv suund: veerg;
joondada-üksused: Keskus;
taustal: #000;
lõhe: 30px;
}

Järgmiseks stiilige avatud modaalne nuppu. Andke sellele muust lehelt erinev taustavärv, et see silma paistaks. Määrake ka selle fondi värv, suurus, polsterdus ja üleminekuaeg.

.avatud modaalne {
taustal: #20c997;
värvi: #fff;
piir: mitte ühtegi;
polsterdus: 20px 40px;
fondi suurus: 48px;
piiriraadius: 100px;
kursor: osuti;
üleminek: kõik 0.3s;
ülevaade: mitte ühtegi;
}
.avatud modaalne: aktiivne {
teisendada: tõlkidaY(-17 pikslit);
}

Seejärel muutke akna avanemisel kuvatava modaalse sisu stiil. Määrake valge taust, andke sellele korpusest väiksem laius ja lisage polsterdus.

Sisestage sellele ka z-indeks, et see ilmuks ees avatud modaalne nuppu. Lisaks määrake varjatud-modaalne kuvatakse kui puudub, nii et see jääb peidetuks, kuni selle käivitate.

.modal-sisu {
taustal: #ccc;
laius: 500px;
polsterdus: 20px;
piiriraadius: 10px;
z-indeks: 99;
}
.modal-header {
kuva: painduv;
õigustama-sisu: tühik-vahel;
margin-alumine: 16px;
värvi: #000;
fondi suurus: 30px;
}
.modal-bodylk { 
fondi suurus: 22px;
reakõrgus: 1.5; 
} 
.varjatud-modaalne { 
kuva: mitte ühtegi; 
}

Seejärel stiilige lähimodaalne läbipaistva taustaga nuppu ja joondage see keskele.

.lähedane-modaalne {
taustal: läbipaistev;
piir: mitte ühtegi;
kuva: painduv;
joondada-üksused: Keskus;
õigustama-sisu: Keskus;
kõrgus: 20px;
laius: 20px;
fondi suurus: 40px;
}
.lähedane-modaalne:hõljuma {
värvi: #fa5252;
}

Lõpuks kujundage hägususe element, mis akna avanemisel taustale kantakse. Sellel on maksimaalne kõrgus ja laius ning taustafilter. Määrake häguseks mitte ühtegi, nii et see poleks enne akna avanemist nähtav.

.blur-bg {
positsiooni: absoluutne;
üleval: 0;
vasakule: 0;
kõrgus: 100%;
laius: 100%;
taustal: rgba(0, 0, 0, 0.3);
taust-filter: hägusus(5px);
}
.varjatud-hägu {
kuva: mitte ühtegi;
}

Pärast CSS-i lisamist peaks leht välja nägema järgmine:

Hüpikakna juhtimine JavaScripti koodiga

Kasutate modaalakna avamiseks ja sulgemiseks JavaScripti, seda kuvades või peites. Lisama sündmuste kuulajad nupule, et see klõpsamisel avaneks ja sulguks.

Esmalt valige asjakohased elemendid, kasutades HTML-is määratletud CSS-i klasse:

lase modaalneSisu = dokument.querySelector(".modal-content");
lase openModal = dokument.querySelector(".open-modal");
lase closeModal = dokument.querySelector(".close-modal");
lase blurBg = dokument.querySelector(".blur-bg");

Lisage sündmusekuulaja avatud modaalne nuppu, nii et see avab akna, kui sellel klõpsate.

openModal.addEventListener("klõpsake", funktsiooni () {
 modalContent.classList.remove("varjatud modaalne");
 blurBg.classList.remove("varjatud hägusus");
});

Hüpikakna sulgemiseks tehke vastupidiseid toiminguid, kuid seekord mähkige need nimega funktsiooni. See käsitleb käitumist mitme sündmuse puhul, mis võivad põhjustada modaalakna sulgemise:

lase closeModalFunction = funktsiooni () {
 modalContent.classList.add("varjatud modaalne")
 blurBg.classList.add("varjatud hägusus")
}

Lisage sündmustekuulajad, et hallata taustal või sulgemisnupul tehtud klõpse ja juhtumeid, kus kasutaja vajutab paoklahvi.

blurBg.addEventListener("klõpsake", closeModalFunction);
closeModal.addEventListener("klõpsake", closeModalFunction);
dokument.addEventListener("klahvi alla", funktsiooni (sündmus) {
kui (sündmus.võti "Põgenemine"
 && !modalContent.classList.contains("peidetud")
 ) {
 closeModalFunction();
 }
});

Nüüd, kui klõpsate nupul Tere! nuppu, ilmub modaal. Saate selle sulgeda, klõpsates aknast paremal asuvat tühistamisnuppu. Vaadake koodi sees codepen.io ja suhelda modaaliga:

Hüpikakende kasutusalad

Hüpik-/modaalsete akende peamine kasutusala veebiarenduses on keskenduda veebisaidi konkreetsele üksusele. Pärast käivitamist desaktiveerib see ülejäänud lehe, paludes kasutajal sellele tähelepanu pöörata.

Hüpikaknad animeerivad teie kasutajaliidest. Nad võivad hoiatada ja juhtida teie kasutajate jaoks olulist teavet veebisaidil. Akna eemaldamiseks peab kasutaja tegema teatud toimingu. Nii saab kasutaja aknaga suhelda ja soovitud teavet hankida.