Nedávno jsem udělal skok od vytváření aplikací fullstack Ruby k práci s JavaScriptem. Jak již možná víte, Javascript umožňuje uživatelům nebo klientům komunikovat s webovou stránkou a dynamicky vykreslovat nový obsah do DOM Na základě interaktivity uživatele. Oproti kódování v Ruby on Rails (v němž každý překreslil vyžaduje full-page refresh), možnost, aby se překreslil různé prvky stránky na základě interakcí uživatele s Javascript přinesl můj frontend rozvoj dovedností z roku 1994 a do současnosti. S mým základním porozuměním JavaScriptu nyní mohu vytvořit interaktivní webový prvek, na který jsem se těšil ve svých projektech: okna zpráv – nebo vyskakovací okna.

modální nebo dialogové okno je okno se zprávou, které se objeví v prohlížeči po určité zadané interaktivitě uživatele. Než se ponoříme do specifik vytváření modálního pole pro váš web pomocí HTML, CSS a JavaScriptu, podívejme se nejprve na různé typy schránek se zprávami, se kterými se můžete setkat.

Upozornění

upozornění se zprávou, obvykle uzamčen v prohlížeči, která vyžaduje reakci uživatele nebo interakce, než to může být propuštěn a zmizí ze stránky. Možná chcete, aby klient potvrdil informace (Podmínky použití) nebo samotná stránka potvrzuje vyplnění formuláře. Dokud však nebude upozornění zamítnuto, klient nemůže komunikovat se zbytkem stránky.

Popup

popup je nepříjemné (myslím, že „lepí“ na stránce, nelepí, jako cukroví), okno se zprávou, které se zobrazí v prohlížeči, který nevyžaduje bezprostřední interakce, nebo pozornost. Pokud uživatel chce, je, aby zmizí, budou muset zavřít, nebo komunikovat s popup v té době, ale interaktivita zbytek stránky je stále funkční. Oznámení jsou příkladem vyskakovacího okna.

Growl Notification/Flash Notice

A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. Uživatel může komunikovat s growl oznámení — možná zavřete zprávu pole začátku, nebo klepněte na tlačítko v oznámení nebo může ignorovat a bude to zmizí po vypršení časovače. Stejně jako vyskakovací okno umožňuje oznámení growl klientovi pokračovat v interakci se zbytkem stránky. Příkladem je e-mail nebo upozornění na sociální média.

Lightbox/Divadlo

lightbox nebo divadla je zprávou, která obvykle zvětší obsah, který byl již k dispozici v prohlížeč pro uživatele, zaměřit se na to. Běžným případem použití je obrázek nebo série obrázků zobrazených v galerii. Když lightbox nebo divadla je zaměstnán s několika kusy obsahu, je považován za „zamčené“, kdy uživatel může procházet související obsah do oblíbených sám, místo návratu na původní stránku a poté kliknutím na další obrázek v sérii, kterou chcete zvětšit.

Bochánek/Hovercard

Jeden z menších políček, bochánek nebo hovercard jen se objeví na obrazovce, když uživatel vznáší své myši nad vybranou oblast. Tato pole zpráv mohou obsahovat pokyny nebo vysvětlení týkající se tlačítka nebo kontejneru, nad kterým se uživatel aktuálně vznáší; mohou také obsahovat náhled dostupných informací, pokud uživatel klikne na odkaz.

Modální/Dialogovém okně

Konečně, modální nebo dialogové okno se zprávou, které umožňuje další interaktivitu stránky bez navigace od aktuální obsah v prohlížeči. Modální box není uzamčen na obrazovce (tj., klient se od něj může pohybovat bez požadované interakce), i když je to obvykle zaměření uživatele(na základě vašeho stylu krabice). Ve většině případů, pokud uživatel chce odmítnout modální, mohou jednoduše zavřít okno pomocí poskytnutého tlačítka nebo kliknout mimo modální. Příklad modální je, když uživatel potřebuje k vyplnění formuláře nebo poskytnout konkrétní informace pro vyhledávací dotaz, ale nechcete přejít na jinou stránku.

Provádění Modální

s cílem vytvořit a zavést modální na své stránky, tam jsou tři kroky, které budete muset dokončit pro funkčnost:

1. HTML: značkovací vytvořit modální element
2. CSS: styling určit, jak vaše modální vypadá a objeví se na stránku
3. Javascript: umístění posluchače událostí, tak modální objeví/zmizí v závislosti na své uživatelské interaktivity

HTML

Pro nejjednodušší modální slovesa, potřebujeme tlačítko (nebo cokoliv prvek na stránce dáváte přednost), na které může uživatel kliknout na aktivovat modální, skutečné modální, a budete pravděpodobně chtít implementovat tlačítko zavřít v rámci modální.

<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">&times;</span>
<p>this is the text inside the modal</p>
</div>
</div>

Ve výše, můžete vidět, že máme tlačítko, které se objeví v našich HTML, stejně jako modální, s tří tříd CSS: modalmodal-btnclose-btn. Každý z nich bude zahrnut do CSS níže. První div je nadřazený kontejner, který obsahuje celý modal s třídou modal. Interně, máme div, který obsahuje obsah pro modální sebe: zavřete modální v span text uvnitř ptag.

jako rychlý stranou, můžete také implementovat záhlaví a zápatí v modal jednoduše vytvořením více divs v rámci HTML a dalších CSS tříd pro styling účely. Příklad:

<div class="modal">
<div class="modal-header">
<span class="close-btn">&times;</span>
<h1>I am the Header</h1>
</div>
<div class="modal-content">
<p>this is the text inside the modal</p>
</div>
<div class="modal-footer">
<h2>I am the Footer</h2>
</div>
</div>

CSS

styl jednotlivých prvků v naší jednoduché modální HTML, musíme vytvořit souborům CSS tříd: .modal.modal-content.close-btn. Dále můžete vidět níže, že je zde také CSS pro vytvoření animace pro modální.

.modal {
display: none;
position: fixed; 
padding-top: 50px;
left: 0; 
top: 0;
width: 100%;
height: 100%; 
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}.modal-content {
position: relative; 
background-color: white;
padding: 20px; 
margin: auto; 
width: 75%; 
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}.close-btn {
float: right; 
color: lightgray; 
font-size: 24px; 
font-weight: bold;
}.close-btn:hover {
color: darkgray;
}@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

ve výše uvedených třídách máme styl pro každý z prvků, které jsme vytvořili v našem HTML.

.modal třída sama o sobě má atributy, které určují, jak se chová stránka za modální sám: šířku a výšku v porovnání se stránka za dialogové okno barva (tento příklad používá semi-opaque gray) a nastavení viditelnosti tak, že můžeme přepnout to v našem Javascriptu, pokud uživatel klepne na tlačítko.

Pro skutečné dialogové okno, máme také samostatný styl v .modal-content: umístění na pozadí styl, barvu pozadí pro okno sám, výplň, a v tomto příkladu je animace součástí tak, že modální klesá dolů od horní části stránky.

Dále jsme stylizované .close-btn třídu, která plave “ x “ na pravé straně, a s .close-btn:hover, když uživatel se vznáší nad tlačítko zavřít, barva se bude měnit. Pro přehlednost může uživatel kliknout mimo modal a zavřít dialogové okno stejně jako kliknutím na tlačítko Zavřít. Vytvoříme posluchače událostí pro obě možnosti v našem JavaScriptu.

to sotva poškrábe povrch CSS, který byste mohli implementovat sami. Neváhejte a upravte výše uvedený kód tak, aby co nejlépe vyhovoval vašim vlastním potřebám.

Javascript

nakonec musíme napsat nějaký Javascript, abychom vytvořili funkčnost modálního.

let modalBtn = document.getElementById("modal-btn")let modal = document.querySelector(".modal")let closeBtn = document.querySelector(".close-btn")modalBtn.onclick = function(){
modal.style.display = "block"
}closeBtn.onclick = function(){
modal.style.display = "none"
}window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}

vybrali Jsme několik objektů z našeho HTML a přiřadit je do proměnné: modal-btnmodalclose-btn. Poté jsme vytvořili posluchače událostí pro onclick události. Když uživatel klikne na modal-btn styl zobrazení je nastaven na "block”, ale po kliknutí na close-btn nebo mimo okno modální (reprezentovanou v našem styling jako semi-neprůhledný šedý), styl zobrazení je poté nastavena na "none". To účinně skryje modální, dokud znovu nekliknou na modal-btn.

Celkově hraní s DOM s Javascript byl neuvěřitelně zábavné a obohacující jako začínající programátor. Doufejme, že výše uvedený kód vám pomůže implementovat modály a zprávy boxy na vlastní pěst příliš. S některými rychlé Googlování, můžete také najít další zdroje pro nastavení modální slovesa a dialogová okna pro své případy použití.

hodně štěstí a šťastné kódování!