nemrég, csináltam a folytatásban létre fullstack Ruby apps to working with Javascript. Amint azt már Ön is tudja, a Javascript lehetővé teszi a felhasználók vagy az ügyfelek számára, hogy egy weboldallal kölcsönhatásba lépjenek, és a felhasználói interaktivitás alapján dinamikusan új tartalmakat jelenítsenek meg a DOM-ban. A Ruby on Rails kódoláshoz képest (amelyben minden átirányító teljes oldalas frissítést igényel), a Javascript felhasználói interakciókon alapuló különböző oldalelemek átirányításának képessége a frontend fejlesztési készségeimet 1994-ből a jelenbe hozta. A Javascript kezdetleges megértésével most létrehozhatok egy interaktív webes elemet, amelyet már vártam a projektjeimben: üzenetdobozok — vagy felbukkanó ablakok.

a modális vagy párbeszédpanel egy üzenetmező, amely bizonyos felhasználói interaktivitás után megjelenik a böngészőben. Mielőtt belevetik magukat a sajátosságait létre modális doboz a webhely HTML, CSS, Javascript, nézzük először vizsgálja felül a különböző típusú üzenet dobozok, hogy előfordulhat, hogy találkoznak.

Alerts

a riasztás egy üzenet mező, általában zárva a böngésző, amely megköveteli a felhasználói válasz vagy interakció előtt el lehet utasítani, majd eltűnik az oldalról. Lehet, hogy azt akarja, hogy az ügyfél nyugtázza az információkat (Felhasználási feltételek), vagy maga az oldal megerősíti az űrlap kitöltését. A figyelmeztetés elutasításáig azonban az ügyfél nem léphet kapcsolatba az oldal többi részével.

felugró

a felugró ablak ragadós (úgy gondolja, hogy “tapad” az oldalra, nem ragadós, mint a cukorka) üzenet doboz, amely megjelenik a böngészőben, amely nem igényel azonnali interakciót vagy figyelmet. Ha egy felhasználó azt akarja, hogy eltűnjenek, akkor abban az időben be kell zárnia vagy kapcsolatba kell lépnie a felugró ablakkal, de az oldal többi részének interaktivitása továbbra is működőképes. Az értesítések egy felbukkanó példa.

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. A felhasználó kapcsolatba léphet a morgás értesítéssel-talán az üzenetdoboz korai elutasítása, vagy az értesítésen belüli gombra kattintás — , vagy dönthet úgy, hogy figyelmen kívül hagyja, majd az időzítő lejárta után eltűnik. Mint egy felugró ablak, a morgás értesítés lehetővé teszi az ügyfél számára, hogy továbbra is kölcsönhatásba lépjen az oldal többi részével. Erre példa egy e-mail vagy közösségi média értesítés.

Lightboxot/Színház

A lightboxot vagy egy színház egy üzenetablak, amely általában a tartalom nagyítása, hogy már elérhető a böngésző a felhasználó koncentrálni. A közös használat esetén egy kép, vagy képsorozat jelenik meg a galériában. Ha egy lightboxot vagy színházat több tartalommal alkalmaznak, akkor azt “zároltnak” tekintik, amikor a felhasználó navigálhat a kapcsolódó tartalomban a lightboxon belül, ahelyett, hogy visszatérne az eredeti oldalra, majd ezt követően a sorozat következő képére kattint a nagyításhoz.

Popover/Hovercard

Egy kisebb üzenetet dobozok, egy popover vagy egy hovercard csak akkor jelenik meg a képernyőn, ha a felhasználó lebeg az egeret a kiválasztott területen. Ezek az üzenetdobozok utasításokat vagy magyarázatokat tartalmazhatnak a felhasználó által jelenleg az egérmutató felett lévő gombbal vagy tárolóval kapcsolatban; tartalmazhatnak előnézetet is a rendelkezésre álló információkhoz, ha a felhasználó rákattint egy linkre.

Modális/Párbeszédpanelen

Végre, a modális vagy párbeszédpanel egy üzenetablak, amely lehetővé teszi a további interaktivitás az oldal nélkül elnavigál az aktuális tartalmakat a böngészőben. A modális doboz nincs bezárva a képernyőre (azaz, az ügyfél el tud navigálni tőle anélkül, hogy a szükséges interakció), bár ez általában a felhasználó középpontjában (alapján a stílus a doboz). A legtöbb esetben, ha a felhasználó el akarja utasítani a modált, egyszerűen bezárhatja a dobozt egy megadott gombbal, vagy kattintson a modálison kívülre. Egy modális példa az, amikor a felhasználónak ki kell töltenie egy űrlapot, vagy konkrét információkat kell megadnia egy keresési lekérdezéshez, de nem akarja, hogy egy másik oldalra navigáljanak.

Végrehajtása Modális

annak érdekében, hogy hozzon létre végrehajtására, modális az oldalon, három lépés, hogy van, hogy teljes funkcionalitás:

1. HTML: markup, hogy hozzon létre a modális elem
2. CSS: stílus, hogy meghatározza, hogy a modális úgy néz ki, majd megjelenik az oldal
3. a Javascript: forgalomba esemény hallgatók, így a modális megjelenik/eltűnik, attól függően, hogy a felhasználói interaktivitás

HTML

a legegyszerűbb módbeli segédigének sem, kell a gombot (vagy bármi oldal elem inkább), hogy egy felhasználó rákattint, hogy aktiválja a modális, az aktuális modális, de valószínűleg akarom, hogy végre egy bezárás gombra belül a modális.

<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>

a fenti, láthatjuk, hogy van egy gomb, amely megjelenik a HTML, valamint egy modális, három CSS osztályok: modalmodal-btn, és close-btn. Ezek mindegyike szerepel az alábbi CSS-ben. Az első div az a szülőtartály, amely a teljes modált tartalmazza modalosztályával. Belsőleg van egy div, amely magában foglalja a modális tartalmat: a modális bezárásához szükséges gomb a span és a szöveg a pcímkén belül.

mint egy gyors félre, akkor is végre fejlécek és láblécek a modális egyszerűen létre több div belül a HTML és további CSS osztályok stílus célokra. Például:

<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

az egyszerű modális HTML minden elemének stílusához létre kell hoznunk a kapcsolódó CSS osztályokat: .modal.modal-content és .close-btn. Továbbá, láthatjuk az alábbiakban, hogy van is CSS tartalmazza, hogy hozzon létre animáció a modális.

.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}
}

a fenti osztályokban stílusunk van minden olyan elemhez, amelyet a HTML-ben hoztunk létre.

a.modal osztály maga attribútumok, amelyek meghatározzák, hogyan kezeli az oldal mögött a modális maga: szélesség és magasság a párbeszédpanel mögötti oldalhoz képest, szín (ez a példa félig átlátszatlan szürkét használ) és láthatósági beállítás, hogy a Javascript-ben be tudjuk kapcsolni, amikor a felhasználó rákattint a gombra.

a tényleges párbeszédpanelhez külön stílus is van a .modal-content – ban: a háttér stílusának elhelyezése, maga a párbeszédpanel háttérszíne, padding, ebben a példában animáció található, így a modális leesik az oldal tetejéről.

továbbá egy.close-btn osztályt alakítottunk ki, amely jobbra egy”x” – et úszik, és a.close-btn:hover, amikor a felhasználó a Bezárás gomb fölé kerül, a szín megváltozik. Az egyértelműség érdekében a felhasználó a modálon kívülre kattintva bezárhatja a párbeszédpanelt, ugyanúgy, mint a Bezárás gombra kattintva. Létrehozunk egy esemény hallgatót mindkét lehetőséghez a Javascript-ben.

ez alig karcolja meg a CSS felületét, amelyet önmagában is megvalósíthat. Nyugodtan állítsa be a fenti kódot, hogy a legjobban megfeleljen a saját igényeinek.

Javascript

végül Javascriptet kell írnunk a modális funkció létrehozásához.

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"
}
}

több objektumot is kiválasztottunk a HTML-ből, és a változókhoz rendeltük őket: a modal-btn, a modal, valamint a close-btn. Ezután létrehoztunk esemény hallgatókat a onclick eseményekhez. Ha a felhasználó rákattint a modal-btn, A megjelenítési stílus beállítása "block”, de amikor rákattint a close-btn vagy az ablakon kívül a modal (képviseli a stílus, mint a félig átlátszatlan szürke), a megjelenítési stílus ezután be van állítva "none". Ez hatékonyan elrejti a modális, amíg rákattint a modal-btn újra.

Általános, játszik a DOM Javascript hihetetlenül szórakoztató, hasznos, mint a kezdet programozó. Remélhetőleg a fenti kód segít megvalósítani modálok, üzenet dobozok a saját is. Néhány gyors Googling, akkor is megtalálja a további forrásokat, hogy állítsa modálok, párbeszédpanelek a használati esetek.

sok szerencsét és boldog kódolást!