Vytvorte vyskakovacie okno pomocou HTML, CSS a JavaScriptu

Dobre navrhnuté vyskakovacie okná robia vašu webovú stránku interaktívnejšou a modernejšou. Môžu vytvárať trhy a zvyšovať predaj pre podniky.

Môžete vytvárať kontextové okná pomocou HTML, CSS a JavaScriptu. Pomocou nasledujúceho sprievodcu vytvorte a upravte vyskakovacie okno od začiatku. Vďaka tomu je váš web interaktívny a vytvára skvelé používateľské skúsenosti.

Napíšte HTML na štruktúrovanie obsahu

Poďme napísať nejaký HTML kód, ktorý má skryté modálne okno, ktoré sa objaví po kliknutí na tlačidlo. V tomto prípade zobrazíte význam slova Ahoj! Vyskakovacie okno bude mať nadpis a nejaký obsah.

Ihneď po spustení modálneho okna sa na pozadí objaví rozmazaný efekt. Pridajte triedy do sekcií, ktoré budete neskôr používať na výber modálu v JavaScripte.

<telo>
<tlačidlotrieda="otvorený spôsob">Ahoj!tlačidlo>
<divtrieda="modálny-obsah skrytý-modálny">





instagram viewer

<divtrieda="modálna hlavička">
<h3>Význam Hello!h3>
<tlačidlotrieda="úzky modálny">×tlačidlo>
div>

<divtrieda="modálne telo">
<p>Hello je pozdrav v anglickom jazyku. Používa sa pri
 začiatok vety ako úvod či už osobne resp
 na telefóne.p>
div>
div>
<divtrieda="blur-bg hidden-blur">div>
<skriptsrc="script.js">skript>
telo>

Stránka by mala vyzerať takto:

Môžete tiež chcieť preskúmať Prvok dialógového okna HTML ak chcete použiť najsémantické značky.

Napíšte CSS na pridanie štýlu

Na formátovanie kontextového okna použite CSS. Umiestnite okno do stredu webovej stránky na čierne pozadie, aby bolo jasne viditeľné. Taktiež upravíte štýl okna, jeho pozadie a veľkosť písma.

Najprv vytvorte jednotný štýl pre celú stranu nastavením okraja, výplne a výšky riadku. Potom zarovnajte prvky tela do stredu na pozadí chrbta.

* {
marža: 0;
vypchávka: 0;
box-size: border-box;
line-height: 1;
}
telo {
výška: 100%;
displej: flex;
ospravedlniť-obsah: centrum;
flex-direction: stĺpec;
align-items: centrum;
pozadie: #000;
medzera: 30px;
}

Ďalej upravte štýl open-modal tlačidlo. Dajte mu inú farbu pozadia ako zvyšok strany, aby vynikla. Tiež nastavte jeho farbu písma, veľkosť, výplň a čas prechodu.

.otvorený-modálny {
pozadie: #20c997;
farba: #fff;
hranica: žiadny;
vypchávka: 20px 40px;
veľkosť písma: 48px;
hraničný polomer: 100px;
kurzor: ukazovateľ;
prechod: všetky 00,3 s;
obrys: žiadny;
}
.otvorený-modálny:aktívny {
transformovať: preložiťY(-17 pixelov);
}

Potom upravte štýl modálneho obsahu, ktorý sa zobrazí po otvorení okna. Nastavte biele pozadie, dajte mu menšiu šírku ako telo a pridajte vypchávky.

Priraďte mu aj z-index, takže sa zobrazí pred open-modal tlačidlo. Okrem toho nastavte skrytý-modálny zobraziť ako žiadne, takže zostane skryté, kým ho nespustíte.

.modálny-obsah {
pozadie: #ccc;
šírka: 500px;
vypchávka: 20px;
hraničný polomer: 10px;
z-index: 99;
}
.modal-header {
displej: flex;
ospravedlniť-obsah: priestor-medzi;
okraj-dole: 16px;
farba: #000;
veľkosť písma: 30px;
}
.modálne-telop { 
veľkosť písma: 22px;
line-height: 1.5; 
} 
.skrytý-modálny { 
displej: žiadny; 
}

Potom upravte štýl blízky modálny tlačidlo s priehľadným pozadím a zarovnajte ho na stred.

.úzko-modálne {
pozadie: transparentný;
hranica: žiadny;
displej: flex;
align-items: centrum;
ospravedlniť-obsah: centrum;
výška: 20px;
šírka: 20px;
veľkosť písma: 40px;
}
.úzko-modálne:vznášať sa {
farba: #fa5252;
}

Nakoniec upravte štýl prvku rozostrenia, ktorý sa po otvorení okna zobrazí na pozadí. Bude mať maximálnu výšku a šírku a filter pozadia. Nastavte rozmazanie na žiadne, takže nebude viditeľné, kým sa neotvorí okno.

.blur-bg {
pozíciu: absolútne;
top: 0;
vľavo: 0;
výška: 100%;
šírka: 100%;
pozadie: rgba(0, 0, 0, 0.3);
filter pozadia: rozmazať(5px);
}
.skryté-rozostrenie {
displej: žiadny;
}

Po pridaní CSS by stránka mala vyzerať takto:

Ovládajte kontextové okno pomocou kódu JavaScript

Na otvorenie a zatvorenie modálneho okna tak, že ho zobrazíte alebo skryjete, použijete JavaScript. Pridať poslucháčov udalostí na tlačidlo, aby sa otvorilo a zatvorilo, keď naň kliknete.

Najprv vyberte relevantné prvky pomocou tried CSS, ktoré ste definovali v HTML:

nech modálny obsah = dokument.querySelector(".modal-content");
nech openModal = dokument.querySelector(".open-modal");
nech closeModal = dokument.querySelector(".close-modal");
nech blurBg = dokument.querySelector(".blur-bg");

Pridajte poslucháča udalostí do open-modal tak, že po kliknutí naň otvoríte okno.

openModal.addEventListener("klik", funkciu () {
 modalContent.classList.remove("skrytý spôsob");
 blurBg.classList.remove("skryté rozostrenie");
});

Vykonajte opačné akcie, aby ste zvládli zatvorenie kontextového okna, ale tentoraz ich zabaľte do pomenovanej funkcie. Tým sa spracuje správanie viacerých udalostí, ktoré môžu spôsobiť zatvorenie modálneho okna:

nech closeModalFunction = funkciu () {
 modalContent.classList.add("skrytý spôsob")
 blurBg.classList.add("skryté rozostrenie")
}

Pridajte poslucháčov udalostí na spracovanie kliknutí na tlačidlo na pozadí alebo zatvorenia a prípad, keď používateľ stlačí kláves Escape.

blurBg.addEventListener("klik", closeModalFunction);
closeModal.addEventListener("klik", closeModalFunction);
dokument.addEventListener("stlačenie kľúča", funkciu (udalosť) {
ak (kľúč.udalosti "útek"
 && !modalContent.classList.contains("skrytý")
 ) {
 closeModalFunction();
 }
});

Teraz, keď kliknete na Ahoj! zobrazí sa modal. Môžete ho zatvoriť kliknutím na tlačidlo Zrušiť v pravej časti okna. Pozrite si kód na codepen.io a interagovať s modálom:

Použitie vyskakovacích okien

Hlavné použitie vyskakovacích/modálnych okien pri vývoji webu je zamerať sa na konkrétnu položku na webovej stránke. Po spustení deaktivuje zvyšok stránky a vyzve používateľa, aby mu venoval pozornosť.

Vyskakovacie okná animujú vaše používateľské rozhranie. Môžu upozorniť a upozorniť na dôležité informácie na webovej stránke pre vašich používateľov. Na odstránenie okna musí používateľ vykonať nejakú akciu. Týmto spôsobom sa používateľ dostane do interakcie s oknom a získa zamýšľané informácie.