Vytvořte vyskakovací okno pomocí HTML, CSS a JavaScriptu

Dobře navržená vyskakovací okna dělají váš web interaktivnějším a modernějším. Mohou vytvářet trhy a zvyšovat prodej pro podniky.

Vyskakovací okna můžete vytvářet pomocí HTML, CSS a JavaScriptu. Pomocí následujícího průvodce vytvořte a upravte vyskakovací okno od začátku. Díky tomu bude váš web interaktivní a vytvoří skvělé uživatelské zkušenosti.

Napište HTML pro strukturování obsahu

Pojďme napsat nějaký HTML kód, který má skryté modální okno, které se objeví po kliknutí na tlačítko. V tomto případě zobrazíte význam slova Ahoj! Vyskakovací okno bude mít nadpis a nějaký obsah.

Ihned po spuštění modálního okna se na pozadí objeví rozmazaný efekt. Přidejte třídy do sekcí, které později použijete k výběru modu v JavaScriptu.

<tělo>
<knoflíktřída="otevřený modální">Ahoj!knoflík>
<divtřída="modální-obsah skrytý-modální">
<divtřída="modální záhlaví">
<h3>Význam Hello!h3>
<knoflíktřída="úzký modální">×knoflík>
div>





instagram viewer

<divtřída="modální tělo">
<p>Hello je pozdrav v anglickém jazyce. Používá se při
 začátek věty jako úvod ať už osobně nebo
 na telefonu.p>
div>
div>
<divtřída="blur-bg hidden-blur">div>
<skriptsrc="script.js">skript>
tělo>

Stránka by měla vypadat takto:

Můžete také chtít prozkoumat HTML dialogový prvek pokud chcete použít nejsémantické označení.

Napište CSS pro přidání stylu

K formátování vyskakovacího okna použijte CSS. Umístěte okno do středu webové stránky na černém pozadí, aby bylo dobře viditelné. Upravíte také styl okna, jeho pozadí a velikost písma.

Nejprve vytvořte jednotný styl pro celou stránku nastavením okraje, odsazení a výšky řádku. Poté zarovnejte prvky těla na střed na zadním pozadí.

* {
okraj: 0;
vycpávka: 0;
velikost krabice: border-box;
výška čáry: 1;
}
tělo {
výška: 100%;
Zobrazit: flex;
ospravedlnit-obsah: centrum;
flex-direction: sloupec;
zarovnat-položky: centrum;
Pozadí: #000;
mezera: 30px;
}

Dále upravte styl otevřený-modální knoflík. Dejte mu jinou barvu pozadí než zbytek stránky, aby vynikla. Nastavte také barvu písma, velikost, výplň a dobu přechodu.

.otevřený-modální {
Pozadí: #20c997;
barva: #fff;
okraj: žádný;
vycpávka: 20px 40px;
velikost písma: 48px;
hraniční poloměr: 100px;
kurzor: ukazatel;
přechod: Všechno 00,3 s;
obrys: žádný;
}
.otevřený-modální:aktivní {
přeměnit: přeložitY(-17 pixelů);
}

Poté upravte styl modálního obsahu, který se zobrazí po otevření okna. Nastavte bílé pozadí, dejte mu menší šířku než tělo a přidejte výplň.

Dejte mu také z-index, takže se objeví před otevřený-modální knoflík. Navíc nastavte skrytý-modální zobrazit jako žádný, takže zůstane skrytý, dokud jej nespustíte.

.modální-obsah {
Pozadí: #ccc;
šířka: 500px;
vycpávka: 20px;
hraniční poloměr: 10px;
z-index: 99;
}
.modal-header {
Zobrazit: flex;
ospravedlnit-obsah: prostor-mezi;
okraj-dole: 16px;
barva: #000;
velikost písma: 30px;
}
.modální-tělesop { 
velikost písma: 22px;
výška čáry: 1.5; 
} 
.skrytý-modální { 
Zobrazit: žádný; 
}

Poté stylujte blízký modální tlačítko s průhledným pozadím a zarovnejte jej na střed.

.blízkomodální {
Pozadí: průhledný;
okraj: žádný;
Zobrazit: flex;
zarovnat-položky: centrum;
ospravedlnit-obsah: centrum;
výška: 20px;
šířka: 20px;
velikost písma: 40px;
}
.blízkomodální:vznášet se {
barva: #fa5252;
}

Nakonec upravte styl prvku rozostření, který se bude vrhat na pozadí, když se otevře okno. Bude mít maximální výšku a šířku a filtr pozadí. Nastavte rozostření jako žádné, takže nebude vidět, dokud se neotevře okno.

.blur-bg {
pozice: absolutní;
horní: 0;
vlevo, odjet: 0;
výška: 100%;
šířka: 100%;
Pozadí: rgba(0, 0, 0, 0.3);
filtr pozadí: rozmazat(5px);
}
.hidden-blur {
Zobrazit: žádný;
}

Po přidání do CSS by stránka měla vypadat takto:

Ovládejte vyskakovací okno pomocí kódu JavaScript

K otevření a zavření modálního okna jeho zobrazením nebo skrytím použijete JavaScript. Přidat posluchači událostí k tlačítku, aby se otevřelo a zavřelo, když na něj kliknete.

Nejprve vyberte příslušné prvky pomocí tříd CSS, které jste definovali v HTML:

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

Přidejte posluchač události do otevřený-modální tak, aby se okno po kliknutí otevřelo.

openModal.addEventListener("kliknout", funkce () {
 modalContent.classList.remove("skrytý způsob");
 blurBg.classList.remove("skryté rozostření");
});

Proveďte opačné akce, abyste zvládli zavření vyskakovacího okna, ale tentokrát je zabalte do pojmenované funkce. To zpracuje chování pro více událostí, které mohou způsobit zavření modálního okna:

nechat closeModalFunction = funkce () {
 modalContent.classList.add("skrytý způsob")
 blurBg.classList.add("skryté rozostření")
}

Přidejte posluchače událostí pro zpracování kliknutí na tlačítko na pozadí nebo zavřít a případ, kdy uživatel stiskne klávesu Escape.

blurBg.addEventListener("kliknout", closeModalFunction);
closeModal.addEventListener("kliknout", closeModalFunction);
dokument.addEventListener("keydown", funkce (událost) {
-li (klíč události "Uniknout"
 && !modalContent.classList.contains("skrytý")
 ) {
 closeModalFunction();
 }
});

Nyní, když kliknete na Ahoj! tlačítko, objeví se modal. Můžete jej zavřít kliknutím na tlačítko Storno v pravé části okna. Viz kód na codepen.io a interagovat s modalem:

Použití vyskakovacích oken

Hlavním využitím vyskakovacích/modálních oken při vývoji webu je zaměřit se na konkrétní položku na webu. Po spuštění deaktivuje zbytek stránky a vyzve uživatele, aby mu věnoval pozornost.

Vyskakovací okna animují vaše uživatelské rozhraní. Mohou upozorňovat a upozorňovat na důležité informace na webové stránce pro vaše uživatele. K odstranění okna musí uživatel provést nějakou akci. Tímto způsobem se uživatel dostane do interakce s oknem a získá zamýšlené informace.