Sprievodca postupmi pre modálne boxy s Javascriptom, HTML a CSS

Nedávno som urobil skok z vytvárania aplikácií typu Ruby na fullstack na prácu s Javascriptom. Ako už možno viete, Javascript umožňuje používateľom alebo klientom interagovať s webovou stránkou a dynamicky vykresľovať nový obsah do DOM na základe interakcie s používateľmi. V porovnaní s kódovaním v Ruby on Rails (v ktorom každý rerender vyžaduje obnovenie na celej stránke), schopnosť znovu vykresliť rôzne prvky stránky na základe používateľských interakcií s Javascriptom priniesla moje zručnosti pre vývoj frontendu od roku 1994 do súčasnosti. S mojím základným porozumením Javascriptu môžem teraz vytvoriť interaktívny webový prvok, na ktorý som sa veľmi tešil pri implementácii v mojich projektoch: schránky správ alebo vyskakovacie okná.

Modálne alebo dialógové okno je okno so správou, ktoré sa v prehliadači zobrazí po určitej špecifikovanej interakcii používateľa. Skôr ako sa pustíme do špecifík vytvorenia modálneho poľa pre váš web pomocou HTML, CSS a Javascript, najprv si prečítajte rôzne typy správ, na ktoré môžete naraziť.

Typy schránok správ

výstrahy

Výstraha je okno so správou, zvyčajne zamknuté v prehľadávači, ktoré pred zrušením a zmiznutím zo stránky vyžaduje reakciu používateľa alebo interakciu. Možno chcete, aby klient potvrdil informácie (Podmienky použitia) alebo že samotná stránka potvrdzuje vyplnenie formulára. Kým však výstraha nebude zrušená, klient nemôže interagovať so zvyškom stránky.

Výstražná schránka

Objaviť sa

Kontextové okno je lepkavé (myslím, že sa lepí na stránku, nie lepkavé ako cukrovinky), ktoré sa objaví v prehliadači a nevyžaduje okamžitú interakciu alebo pozornosť. Ak používateľ chce, aby zmizol, musí sa v tom čase zatvoriť alebo s ním otvoriť dialógové okno, interaktivita zvyšku stránky je však stále funkčná. Upozornenia sú príkladom kontextového okna.

Kontextové hlásenie

Growl Notification / Flash Notice

Oznámenie zavrčania je kontextové okno, ktoré sa po pridruženom časovom období zruší. Tieto sa niekedy označujú aj ako upozornenia typu flash. Užívateľ môže interagovať s oznámením zavrčaním - napríklad aby predčasne zavrel okno so správou alebo klikol na tlačidlo v oznámení - alebo sa môže rozhodnúť ignorovať a po uplynutí časovača zmizne. Rovnako ako kontextové okno umožňuje upozornenie vrčanie klientovi pokračovať v interakcii so zvyškom stránky. Príkladom je e-mail alebo upozornenie na sociálne médiá.

Growl Notification

Lightbox / Divadlo

Svetelná schránka alebo divadlo je okno s hlásením, ktoré zvyčajne zväčšuje obsah, ktorý už bol v prehliadači k dispozícii, aby sa naň mohol používateľ zamerať. Bežným prípadom použitia je obrázok alebo séria obrázkov zobrazených v galérii. Ak sa používa lightbox alebo divadlo s viacerými kusmi obsahu, považuje sa to za „uzamknuté“, keď používateľ môže prechádzať pridruženým obsahom v samotnom lightboxe, namiesto návratu na pôvodnú stránku a následným kliknutím na nasledujúci obrázok v sérii. zväčšiť.

Lightbox / Divadlo

Popover / vizitka

Jeden z menších okien správ, popover alebo vznášadlo sa na obrazovke objavia iba vtedy, keď používateľ umiestni kurzor myši na vybranú oblasť. Tieto rámčeky správ môžu obsahovať pokyny alebo vysvetlenia týkajúce sa tlačidla alebo kontajnera, nad ktorým sa používateľ aktuálne vznáša; môžu tiež obsahovať ukážku dostupných informácií, ak používateľ klikne na odkaz.

Popover / vizitka

Modálne / dialógové okno

Nakoniec, modálne alebo dialógové okno je okno so správou, ktoré umožňuje ďalšiu interaktivitu stránky bez toho, aby sa odklonilo od aktuálneho obsahu v prehliadači. Modálne pole nie je uzamknuté na obrazovke (t. J. Klient sa môže od neho vzdialiť bez požadovanej interakcie), hoci zvyčajne sa zameriava na používateľa (na základe vášho štýlu tohto poľa). Vo väčšine prípadov, ak užívateľ chce prepnúť režim, môže jednoducho zatvoriť rámček pomocou poskytnutého tlačidla alebo kliknúť mimo tohto režimu. Príkladom spôsobu je prípad, keď používateľ potrebuje vyplniť formulár alebo poskytnúť konkrétne informácie pre vyhľadávací dopyt, ale nechcete, aby prešiel na inú stránku.

Modálne / dialógové okno

Implementácia spôsobu

Ak chcete na svojej stránke vytvoriť a implementovať modálny spôsob, musíte z dôvodu funkčnosti vykonať tri kroky:

  1. HTML: označenie na vytvorenie modálneho prvku
  2. CSS: štýl na určenie toho, ako vyzerá a ako sa váš modálny vzhľad objaví na stránke
  3. Javascript: umiestnenie poslucháčov udalostí tak, aby sa modal objavil / zmizol v závislosti od interakcie používateľa

HTML

Pre najjednoduchšie modály potrebujeme tlačidlo (alebo ktorýkoľvek element stránky, ktorý uprednostňujete), na ktorý môže používateľ kliknúť, aby aktivoval modal, skutočný modal a pravdepodobne budete chcieť implementovať tlačidlo close v rámci modálu.

Vo vyššie uvedenom texte vidíte, že máme tlačidlo, ktoré sa objaví v našom HTML, ako aj modálne, s tromi triedami CSS: modálne, modálne-btn a close-btn. Každá z nich bude zahrnutá do CSS nižšie. Prvá div je nadradená nádoba, ktorá obsahuje celý druh dopravy s triedou druhov dopravy. Interne máme div, ktorý obsahuje obsah samotného modálu: tlačidlo na zatvorenie modálu v rozpätí a text v rámci ptag.

Ako rýchly krok si tiež môžete do svojho modálu implementovať hlavičky a päty jednoduchým vytvorením viacerých divov v rámci HTML a ďalších tried CSS na účely stylingu. Napríklad:

CSS

Ak chcete upraviť každý z prvkov v kóde HTML nášho jednoduchého spôsobu, musíme vytvoriť priradené triedy CSS: .modal, .modal-content a .close-btn. Ďalej vidno, že je tu tiež zahrnutý CSS na vytvorenie animácie pre modálne.

.modal {
  displej: žiadny;
  poloha: pevná;
  výplň: 50px;
  vľavo: 0;
  hore: 0;
  šírka: 100%;
  výška: 100%;
  farba pozadia: rgb (0, 0, 0);
  farba pozadia: rgba (0, 0, 0, 0,5);
}
.modal-content {
  poloha: relatívna;
  farba pozadia: biela;
  čalúnenie: 20px;
  marža: auto;
  šírka: 75%;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  trvanie animácie: 0,4 s
}
.close-btn {
  plavák: vpravo;
  farba: svetlozelená;
  veľkosť písma: 24px;
  font-weight: bold;
}
.close-btn: hover {
  farba: tmavá;
}
@ -webkit-keyframes animatetop {
  od {top: -300px; Nepriehľadnosť: 0}
  do {top: 0; Nepriehľadnosť: 1}
}
@keyframes animatetop {
  od {top: -300px; Nepriehľadnosť: 0}
  do {top: 0; Nepriehľadnosť: 1}
}

Vo vyššie uvedených triedach máme štýl pre každý z prvkov, ktoré sme vytvorili v našom HTML.

Samotná trieda .modal má atribúty, ktoré určujú, ako zaobchádza so stránkou za samotným modom: šírka a výška v porovnaní so stránkou za dialógovým oknom, farba (v tomto príklade sa používa polopriehľadná šedá) a nastavenie viditeľnosti, takže že ho môžeme prepnúť v našom skripte Javascript, keď používateľ klikne na tlačidlo.

Pre skutočné dialógové okno máme tiež samostatný štýl v .modal-content: umiestnime ho proti štýlu pozadia, farbu pozadia pre samotné dialógové okno, výplň a v tomto príklade je zahrnutá animácia, takže modálne klesá nadol z hornú časť stránky.

Ďalej sme navrhli triedu .close-btn, ktorá pláva „x“ doprava, a pomocou .close-btn: hover, keď používateľ prejde kurzorom na tlačidlo zavrieť, farba sa zmení. Pre lepšiu prehľadnosť môže používateľ kliknúť mimo modálnej obrazovky a zatvoriť dialógové okno rovnako ako kliknutie na tlačidlo Zatvoriť. Vytvoríme poslucháč udalostí pre obe možnosti v našom skripte Javascript.

To sotva poškriabe povrch CSS, ktorý by ste mohli implementovať sami. Neváhajte a upravte vyššie uvedený kód tak, aby čo najlepšie vyhovoval vašim vlastným potrebám.

Javascript

Nakoniec potrebujeme napísať nejaký Javascript, aby sme vytvorili funkčnosť modálu.

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 sme niekoľko objektov z nášho HTML a priradili sme ich premenným: modal-btn, samotný modal a close-btn. Potom vytvoríme poslucháčov udalostí pre udalosti onclick. Keď používateľ klikne na modálny btn, štýl zobrazenia je nastavený na „blokovať“, ale keď klikne na zatvorený btn alebo okno mimo modálneho režimu (v našom štýle je zobrazené ako polopriehľadná šedá), Štýl displeja je potom nastavený na „žiadny“. Týmto spôsobom skryjete modálne režimy, až kým znova nekliknú na modálne btn.

Modal Vytlačené na obrazovku

Celkovo je hranie s DOM s Javascriptom neuveriteľne zábavné a obohacujúce ako počiatočný kódovač. Dúfajme, že vyššie uvedený kód vám pomôže implementovať spôsoby dopravy a správy aj sami. Pomocou niekoľkých rýchlych služieb Google nájdete tiež ďalšie zdroje na úpravu spôsobov a dialógových okien pre vaše prípady použitia.

Veľa šťastia a šťastné kódovanie!

zdroje

Výmena zásobníkov: Modály, kontextové okná, vyskakovacie okná a Lightboxy

w3schools: How to - CSS / JS Modal

Sabe: Ako vytvoriť modálne vyskakovacie okno s CSS a JavaScript