A párbeszédpanelek és a modálok a legtöbb webalkalmazás szerves részét képezik. Bár a kézi készítés nem bonyolult feladat, minden webfejlesztő számára gyorsan unalmassá válik. A kézi építés szokásos alternatívája az, ha valaki más által épített alkatrészt használ.

Van azonban néhány probléma ezzel a megközelítéssel. Annyi lehetőség van, hogy nehéz eldönteni, melyik komponens lenne a legjobb használni, és az ilyen komponensek megjelenésének testreszabása néha ugyanolyan fárasztó lehet, mint egy párbeszédpanel felépítése kézzel. Szerencsére van egy másik alternatíva: a HTML párbeszédpanel.

Mi az a párbeszédelem?

A HTML párbeszédpanel elem egy beépített HTML-címke (például div vagy span), amely lehetővé teszi a fejlesztők számára, hogy egyéni párbeszédpaneleket és modálokat hozzanak létre. A párbeszédelem 2014 óta létezik a Chrome-ban és az Operában, de csak a közelmúltban vált támogatva az összes nagyobb böngésző.

Miért használja a párbeszédelemet?

A párbeszédelem használatának elsődleges oka a kényelem. Ez megkönnyíti a párbeszédpanelek létrehozását, amelyek akár soron belül, akár modálisan jelenhetnek meg, egyetlen HTML-címkével és néhány soros JavaScripttel.

instagram viewer

A párbeszédelem megszünteti az egyéni párbeszédpanel létrehozásának és hibakeresésének szükségességét, vagy valaki más összetevőjének importálását. CSS-sel is nagyon könnyű stílust készíteni.

Böngésző támogatás a párbeszédpanelhez

Sajnos a párbeszédpanel-elem böngésző támogatása lehetne jobb. 2022 márciusától az összes főbb böngésző legújabb verziója támogatja, bizonyos kikötésekkel.

A Firefox 98-nál régebbi Firefox böngésző csak akkor támogatja, ha manuálisan engedélyezve van a böngésző beállításaiban, a Safari 15.4-nél korábbi verziói pedig egyáltalán nem támogatják. A teljes böngészőtámogatási részletek itt érhetők el használhatom.

Szerencsére ez nem jelenti azt, hogy a párbeszédelem használhatatlan. A Google Chrome csapata fenntart egy többkitöltést, amelyen megtalálható Github a párbeszédpanel elemhez, amely még olyan böngészőkön is támogatja, ahol natívan nem támogatott.

Jelenlegi formájában a párbeszédpanel elemnek akadálymentesítési problémái lehetnek, ezért alkalmasabb lehet egyéni párbeszédablakos komponens használata, mint pl. a11y-párbeszéd termelési alkalmazásokban.

A párbeszédpanel használata

A párbeszédelem használatának bemutatásához egy közös webhely-funkció létrehozására kell használnia: egy megerősítő módot a törlés gombhoz.

Mindössze egyetlen HTML-fájl szükséges a követéshez.

1. Állítsa be a HTML fájlt

Kezdje az említett fájl létrehozásával, és nevezze el index.html-nek.

Ezután határozza meg a HTML-fájl szerkezetét, és adjon meg néhány alapvető metainformációt az oldalról, hogy az minden eszközön megfelelően jelenjen meg.

Írja be a következő kódot az index.html fájlba:

<!DOCTYPE html>
<html lang="hu">
<fej>
<meta karakterkészlet="UTF-8">
<meta http-equiv="X-UA-kompatibilis" tartalom="IE=él">
<meta név="nézetablak" tartalom="szélesség=eszköz-szélesség, kezdeti lépték=1,0">
<cím>Párbeszéd bemutató</title>
</head>
<stílus></style>


<test></body>
<forgatókönyv></script>
</html>

Ez az összes beállítás, amely ehhez a projekthez szükséges.

2. A jelölés írása

Ezután írja be a törlés gomb jelölését, valamint a párbeszédpanel elemet.

Írja be a következő kódot az index.html törzscímkéjébe:

<div class="gomb-tartály">
<gomb>
Töröl tétel
</button>
</div>
<párbeszéd>
<div>
 Biztos, hogy akarod törölez tétel?
</div>
<div>
<gomb osztály="Bezárás">
 Igen
</button>
<gomb osztály="Bezárás">
 Nem
</button>
</div>
</dialog>

A fenti HTML létrehozza:

  • Törlés gomb.
  • A párbeszéd elem.
  • Két gomb a párbeszédpanelen belül.

Ha az index.html meg van nyitva a böngészőben, akkor a képernyőn csak a törlés gomb látható. Ez nem jelenti azt, hogy bármi baj van, a párbeszédelemnek egyszerűen szüksége van egy kis JavaScriptre, hogy láthatóvá váljon.

3. JavaScript hozzáadása

Most írja be azt a kódot, amely megnyitja a párbeszédpanelt, amikor a felhasználó a törlés gombra kattint, valamint azt a kódot, amely lehetővé teszi a párbeszédpanel bezárását.

Írja be a következőket az index.html szkriptcímkéjébe:

const modális = dokumentum.querySelector("párbeszéd")
document.querySelector(".button-container gomb").addEventListener("kattintson", () => {
modális.showModal();
});
const closeBtns = dokumentum.getElementsByClassName("close");
for (btn of closeBtns) {
 btn.addEventListener("kattintson", () => {
modális.Bezárás();
 })
}

Ezt a kódot a querySelector metódust használja hogy hivatkozásokat kapjon a gombokra és a párbeszédpanelre. Ezután minden gombhoz csatol egy kattintási eseményfigyelőt.

Talán ismered eseményfigyelők JavaScriptben, amelyet saját maga is használhat. A törlés gombhoz csatolt eseményfigyelő meghívja a showModal() metódust a párbeszédpanel megjelenítéséhez, amikor a gombra kattintanak.

A modálison belül minden gombhoz tartozik egy eseményfigyelő, amely a close() metódus segítségével elrejti a párbeszédpanelt, amikor rájuk kattintanak.

Még akkor is, ha nincs JavaScript, amely meghívja a close() metódust a kódban, a felhasználók bezárhatják a modált a billentyűzeten lévő escape billentyű megnyomásával.

Most, hogy ez a JavaScript a helyén van, ha a felhasználó a törlés gombra kattint, a modális megnyílik, az igen vagy nem gombra kattintva pedig bezárja a modált.

Így kell kinéznie a megnyitott modálnak:

Egy dolog, amit érdemes megjegyezni, az, hogy a párbeszédelemhez már tartozik némi stílus, bár az index.html-ben nincs CSS. A modális már középre van állítva, van szegélye, a szélesség a tartalomra korlátozódik, és van benne némi alapértelmezett kitöltés.

A felhasználók nem tudnak kölcsönhatásba lépni (kattintani, kiválasztani) semmivel a háttérben, amíg a modális nyitva van.

A dialóguselem modális helyett az oldal folyamának részeként is megjelenhet. A kipróbáláshoz módosítsa az első eseményfigyelőt a JavaScriptben, így:

document.querySelector(".button-container gomb").addEventListener("kattintson", () => { modal.show(); });

Az egyetlen dolog, ami ebben a kódban változott, az az, hogy a kód a show() metódust hívja a showModal() metódus helyett. Most, amikor a felhasználó az elem törlése gombra kattint, a modálisnak meg kell nyílnia a következőképpen:

4. Stílus hozzáadása

Ezután CSS írásával testreszabhatja a párbeszédpanel megjelenését és hátterét.

A CSS csökkenti a párbeszédablak szegélyét, korlátozza a maximális szélességét, majd sötétíti a hátteret, valamint egy kis stílust ad a gombokhoz.

Maga a párbeszédablak stílusa egyszerű, de a háttér pszeudoosztályra szükség van a párbeszédpanel hátterét célzó stílus hozzáadásához.

Illessze be a következő kódot az index.html stíluscímkéjébe:

párbeszédpanel:: backdrop {
 háttér: fekete;
átlátszatlanság: 0.5;
}
gomb {
 határsugár: 2px;
 háttérszín: fehér;
 keret: 1px tömör fekete;
 margó: 5 képpont;
 box-shadow: 1px 1px 2px szürke;
}
párbeszédablak {
 maximális szélesség: 90vw;
 keret: 1px tömör fekete;
}

Amikor a párbeszédpanel megnyílik, most így kell kinéznie:

És felépített egy teljesen működőképes párbeszédpanelt.

A párbeszédelem nagyszerű módja a modálok létrehozásának

A közelmúltban az összes főbb böngészőben támogatott HTML párbeszédpanel segítségével a webfejlesztők mostantól teljesen működőképes, könnyen testreszabható modálok és párbeszédpanelek egyetlen HTML címkével és néhány soros JavaScripttel anélkül, hogy harmadik félre kellene hagyatkozni megoldás.

A párbeszédelemnek a Google Chrome csapata által karbantartott többkitöltése van, amely lehetővé teszi a fejlesztők számára, hogy a párbeszédpanelt olyan böngészőverziókban is használják, amelyek nem támogatják.