Sukurkite iššokantįjį langą naudodami HTML, CSS ir JavaScript

Dėl gerai suprojektuotų iššokančių langų jūsų svetainė tampa interaktyvesnė ir modernesnė. Jie gali sukurti rinkas ir padidinti pardavimą įmonėms.

Galite kurti iššokančius langus naudodami HTML, CSS ir JavaScript. Naudokite šį vadovą, kad sukurtumėte ir sukurtumėte iššokantįjį langą nuo nulio. Tai daro jūsų svetainę interaktyvią ir sukuria puikią vartotojo patirtį.

Parašykite HTML, kad susistemintumėte turinį

Parašykime HTML kodą su paslėptu modaliniu langu, kuris pasirodo spustelėjus mygtuką. Tokiu atveju parodysite žodžio reikšmę Sveiki! Iššokančiajame lange bus antraštė ir tam tikras turinys.

Iš karto suaktyvinus modalinį langą, fone atsiranda neryškus efektas. Pridėkite klases prie skilčių, kurias naudosite norėdami pasirinkti modalą vėliau „JavaScript“.

<kūnas>
<mygtukąklasė="atviras modalas">Sveiki!mygtuką>
<divklasė=„modalinis turinys paslėptas-modalinis“>





instagram viewer

<divklasė="modalinė antraštė">
<h3>Sveiki!h3>
<mygtukąklasė=„artimas modalinis“>×mygtuką>
div>

<divklasė="modalinis korpusas">
<p>Sveiki – tai sveikinimas anglų kalba. Jis naudojamas esant
 sakinio pradžia kaip įžanga asmeniškai arba
 telefonu.p>
div>
div>
<divklasė="blur-bg hidden-blur">div>
<scenarijussrc="script.js">scenarijus>
kūnas>

Puslapis turėtų atrodyti taip:

Taip pat galite norėti ištirti HTML dialogo elementas jei norite naudoti semantiškiausią žymėjimą.

Parašykite CSS, kad pridėtumėte stilių

Norėdami suformatuoti iššokantįjį langą, naudokite CSS. Padėkite langą tinklalapio centre juodame fone, kad jis būtų aiškiai matomas. Taip pat nustatysite lango stilių, jo foną ir šrifto dydį.

Pirmiausia sukurkite vienodą viso puslapio stilių, nustatydami paraštę, užpildymą ir linijos aukštį. Tada sulygiuokite kūno elementus centre ant nugaros fono.

* {
marža: 0;
kamšalas: 0;
dėžutės dydžio: kraštinė-dėžė;
linijos aukštis: 1;
}
kūnas {
aukščio: 100%;
ekranas: lankstus;
pateisinti-turinys: centras;
lankstumo kryptis: stulpelyje;
išlyginti elementus: centras;
fone: #000;
tarpas: 30px;
}

Tada sukurkite stilių atviras modalas mygtuką. Suteikite jam kitokią fono spalvą nei likusi puslapio dalis, kad jis išsiskirtų. Taip pat nustatykite šrifto spalvą, dydį, užpildymą ir perėjimo laiką.

.atviras-modalinis {
fone: #20c997;
spalva: #fff;
siena: nė vienas;
kamšalas: 20px 40px;
šrifto dydis: 48px;
pasienio spindulys: 100px;
žymeklį: rodyklė;
perėjimas: visi 0.3s;
kontūras: nė vienas;
}
.atviras-modalinis:aktyvus {
transformuoti: išverstiY(-17 taškų);
}

Tada nustatykite modalinio turinio stilių, kuris bus rodomas atidarius langą. Nustatykite baltą foną, suteikite jam mažesnį plotį nei korpusas ir pridėkite paminkštinimus.

Taip pat pateikite z indeksą, kad jis būtų rodomas priešais atviras modalas mygtuką. Be to, nustatykite paslėptas-modalinis rodomas kaip nėra, todėl jis lieka paslėptas, kol jį suaktyvinsite.

.modalinis turinys {
fone: #ccc;
plotis: 500px;
kamšalas: 20px;
pasienio spindulys: 10px;
z indeksas: 99;
}
.modal-header {
ekranas: lankstus;
pateisinti-turinys: tarpas-tarp;
paraštė-apačia: 16px;
spalva: #000;
šrifto dydis: 30px;
}
.modalinis korpusasp { 
šrifto dydis: 22px;
linijos aukštis: 1.5; 
} 
.paslėptas-modalinis { 
ekranas: nė vienas; 
}

Tada stilizuokite artimas modalinis mygtuką su skaidriu fonu ir sulygiuokite jį centre.

.uždaryti-modalinis {
fone: skaidrus;
siena: nė vienas;
ekranas: lankstus;
išlyginti elementus: centras;
pateisinti-turinys: centras;
aukščio: 20px;
plotis: 20px;
šrifto dydis: 40px;
}
.uždaryti-modalinis:užveskite pelės žymeklį {
spalva: #fa5252;
}

Galiausiai nustatykite suliejimo elemento stilių, kuris atsidarys fone. Jis turės maksimalų aukštį ir plotį bei fono filtrą. Nustatykite suliejimą kaip jokio, kad jis nebūtų matomas, kol neatsidarys langas.

.blur-bg {
padėtis: absoliutus;
viršuje: 0;
paliko: 0;
aukščio: 100%;
plotis: 100%;
fone: rgba(0, 0, 0, 0.3);
fonas-filtras: suliejimas(5px);
}
.paslėptas-neryškus {
ekranas: nė vienas;
}

Įdėjus CSS, puslapis turėtų atrodyti taip:

Valdykite iššokantįjį langą naudodami „JavaScript“ kodą

Naudosite JavaScript, kad atidarytumėte ir uždarytumėte modalinį langą rodydami arba paslėpdami jį. Papildyti renginio klausytojai mygtuką, kad jis atsidarytų ir užsidarytų spustelėjus.

Pirmiausia pasirinkite atitinkamus elementus naudodami CSS klases, kurias apibrėžėte HTML:

leisti modalContent = dokumentas.querySelector(".modal-content");
leisti openModal = dokumentas.querySelector(".open-modal");
leisti closeModal = dokumentas.querySelector(".close-modal");
leisti blurBg = dokumentas.querySelector(".blur-bg");

Pridėkite įvykių klausytoją prie atviras modalas mygtuką, kad jį spustelėjus atsidarytų langas.

openModal.addEventListener("spausti", funkcija () {
 modalContent.classList.remove(„paslėptas modalinis“);
 blurBg.classList.remove("paslėptas suliejimas");
});

Atlikite priešingus veiksmus, kad uždarytumėte iššokantįjį langą, tačiau šį kartą sudėkite juos į pavadintą funkciją. Tai apdoros kelių įvykių, dėl kurių modalinis langas gali užsidaryti, elgseną:

leisti closeModalFunction = funkcija () {
 modalContent.classList.add(„paslėptas modalinis“)
 blurBg.classList.add("paslėptas suliejimas")
}

Pridėkite įvykių klausytojus, kad galėtumėte spustelėti foną arba uždaryti mygtuką ir atvejį, kai vartotojas paspaudžia klavišą Escape.

blurBg.addEventListener("spausti", closeModalFunction);
closeModal.addEventListener("spausti", closeModalFunction);
dokumentas.addEventListener("keydown", funkcija (įvykis) {
jeigu (įvykis.raktas "Pabegti"
 && !modalContent.classList.contains("paslėpta")
 ) {
 closeModalFunction();
 }
});

Dabar, kai spustelėsite Sveiki! mygtuką, pasirodo modalas. Galite jį uždaryti spustelėdami atšaukimo mygtuką lango dešinėje. Žiūrėkite kodą codepen.io ir sąveikauti su modalu:

Iššokančiųjų langų naudojimas

Pagrindinis iššokančiųjų / modalinių langų naudojimas kuriant žiniatinklio svetainę yra sutelkti dėmesį į tam tikrą svetainės elementą. Suaktyvinus, ji išjungia likusią puslapio dalį ir ragina vartotoją atkreipti į tai dėmesį.

Iššokantieji langai animuoja jūsų vartotojo sąsają. Jie gali įspėti ir atkreipti jūsų vartotojų dėmesį į svarbią informaciją tinklalapyje. Norėdami pašalinti langą, vartotojas turi atlikti tam tikrą veiksmą. Tokiu būdu vartotojas gali bendrauti su langu ir gauti reikiamą informaciją.