Vyskakovací okna jsou na internetu všudypřítomná, ale nejsou všechna špatná. Naučte se, jak vytvořit dobře fungující vyskakovací okno pomocí standardních webových technologií.
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><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.
