Okna dialogowe i modalne są integralnymi częściami większości aplikacji internetowych. Ręczne ich tworzenie nie jest skomplikowanym zadaniem, ale szybko staje się nużące dla każdego web developera. Zwykle alternatywą dla ręcznego budowania jest użycie komponentu zbudowanego przez kogoś innego.

Jest jednak kilka problemów z tym podejściem. Jest tak wiele opcji, że trudno jest określić, który komponent byłby najlepszy, a dostosowywanie wyglądu takich komponentów może być czasem tak samo żmudne jak budowanie okna dialogowego ręcznie. Na szczęście istnieje inna alternatywa: element HTML dialog.

Co to jest element dialogu?

Element okna dialogowego HTML jest wbudowanym znacznikiem HTML (takim jak div lub span), który umożliwia programistom tworzenie niestandardowych okien dialogowych i modalnych. Element dialogu istnieje w Chrome i Operze od 2014 roku, ale dopiero niedawno został obsługiwany przez wszystkie główne przeglądarki.

Dlaczego warto korzystać z elementu dialogu?

Podstawowym powodem korzystania z elementu dialog jest wygoda. Ułatwia tworzenie okien dialogowych, które mogą pojawiać się w tekście lub jako modalne, z zaledwie jednym znacznikiem HTML i kilkoma wierszami kodu JavaScript.

instagram viewer

Element dialog eliminuje potrzebę tworzenia i debugowania niestandardowego okna dialogowego lub importowania komponentu innej osoby. Bardzo łatwo jest też stylizować za pomocą CSS.

Obsługa przeglądarki dla elementu dialogowego

Niestety, wsparcie przeglądarki dla elementu dialog mogłoby być lepsze. Jest obsługiwany w najnowszych wersjach wszystkich głównych przeglądarek od marca 2022 r. z pewnymi zastrzeżeniami.

Każda przeglądarka Firefox starsza niż Firefox 98 będzie ją obsługiwać tylko wtedy, gdy zostanie ręcznie włączona w ustawieniach przeglądarki, a każda wersja Safari wcześniejsza niż Safari 15.4 nie obsługuje jej w ogóle. Pełne informacje o obsłudze przeglądarek są dostępne na mogę uzyć.

Na szczęście nie oznacza to, że element dialogu jest bezużyteczny. Zespół Google Chrome utrzymuje wypełnienie, które można znaleźć na Github dla elementu dialog, który zapewnia jego obsługę nawet w przeglądarkach, w których nie jest on natywnie obsługiwany.

W swojej obecnej formie element okna dialogowego może mieć problemy z dostępnością, więc bardziej odpowiednie może być użycie niestandardowego komponentu okna dialogowego, takiego jak okno dialogowe a11y w zastosowaniach produkcyjnych.

Jak korzystać z elementu dialogu

Aby zademonstrować, jak korzystać z elementu dialog, użyjesz go do zbudowania wspólnej funkcji witryny: modalnego potwierdzenia dla przycisku usuwania.

Wszystko, co trzeba zrobić, to jeden plik HTML.

1. Skonfiguruj plik HTML

Zacznij od utworzenia wspomnianego pliku i nazwania go index.html.

Następnie ustal strukturę pliku HTML i podaj podstawowe meta-informacje o stronie, aby renderowała się poprawnie na wszystkich urządzeniach.

Wpisz następujący kod do index.html:

<!DOCTYPE html>
<html lang="en">
<głowa>
<zestaw znaków meta="UTF-8">
<meta http-equiv="Kompatybilny z X-UA" zawartość="IE=krawędź">
<nazwa meta="rzutnia" zawartość="szerokość=szerokość urządzenia, skala początkowa=1.0">
<tytuł>Demo okna dialogowego</title>
</head>
<styl></style>


<ciało></body>
<scenariusz></script>
</html>

To cała konfiguracja niezbędna do tego projektu.

2. Pisanie znaczników

Następnie napisz znacznik przycisku usuwania, a także element dialogu.

Wpisz następujący kod w tagu body index.html:

<klasa div="pojemnik na guziki">
<przycisk>
Usuwać przedmiot
</button>
</div>
<dialog>
<div>
 Czy na pewno chcesz? kasowaćten przedmiot?
</div>
<div>
<klasa przycisku="blisko">
 TAk
</button>
<klasa przycisku="blisko">
 Nie
</button>
</div>
</dialog>

Powyższy kod HTML utworzy:

  • Przycisk usuwania.
  • Element okna dialogowego.
  • Dwa przyciski w oknie dialogowym.

Jeśli index.html jest otwarty w Twojej przeglądarce, jedynym elementem widocznym na ekranie będzie przycisk usuwania. Nie oznacza to, że coś jest nie tak, element dialog wymaga po prostu odrobiny JavaScriptu, aby stał się widoczny.

3. Dodawanie JavaScript

Teraz napisz kod, który otworzy okno dialogowe, gdy użytkownik kliknie przycisk usuwania, a także kod umożliwiający zamknięcie okna.

Wpisz następujące polecenie w tagu skryptu index.html:

stały modalny = dokument.querySelector("okno")
document.querySelector(".button-przycisk pojemnika").addEventListener("Kliknij", () => {
modalny.showModal();
});
stały zamknijBtns = dokument.getElementsByClassName("zamknij");
za (btn z closeBtns) {
 btn.addEventListener("Kliknij", () => {
modalny.blisko();
 })
}

Ten kod używa metody querySelector aby uzyskać odniesienia do przycisków i okna dialogowego. Następnie dołącza detektor zdarzenia kliknięcia do każdego przycisku.

Możesz być zaznajomiony z detektory zdarzeń w JavaScript, których możesz używać samodzielnie. Detektor zdarzeń dołączony do przycisku usuwania wywołuje metodę showModal() w celu wyświetlenia okna dialogowego po kliknięciu przycisku.

Do każdego przycisku w module jest dołączony detektor zdarzeń, który używa metody close() do ukrywania okna dialogowego po kliknięciu.

Nawet jeśli w kodzie nie ma kodu JavaScript, który wywołuje metodę close(), użytkownicy mogą również zamknąć ten mod, naciskając klawisz Escape na swojej klawiaturze.

Teraz, gdy ten JavaScript jest na swoim miejscu, jeśli użytkownik kliknie przycisk Usuń, otworzy się modalne, a kliknięcie przycisku tak lub nie zamknie modalne.

Tak powinien wyglądać otwarty modalny:

Warto zauważyć, że element dialog jest już wyposażony w stylizację, mimo że w index.html nie ma CSS. Modalny jest już wyśrodkowany, ma obramowanie, szerokość jest ograniczona do zawartości i ma domyślne wypełnienie.

Użytkownicy nie mogą wchodzić w interakcje (klikać, wybierać) z niczym w tle, gdy moduł modalny jest otwarty.

Element dialog może również wyświetlać się jako część przepływu strony, a nie jako modalny. Aby to wypróbować, zmień pierwszy detektor zdarzeń w JavaScript w następujący sposób:

document.querySelector(".button-przycisk pojemnika").addEventListener("Kliknij", () => { modalne.pokaż(); });

Jedyne, co się zmieniło w tym kodzie, to wywołanie metody show() zamiast metody showModal(). Teraz, gdy użytkownik kliknie przycisk usuwania elementu, mod powinien otworzyć się w wierszu w następujący sposób:

4. Dodaj stylizację

Następnie dostosuj wygląd okna dialogowego i jego tło, pisząc CSS.

CSS zmniejszy obramowanie okna dialogowego, ograniczy jego maksymalną szerokość, a następnie przyciemni tło, a także doda trochę stylu do przycisków.

Stylizacja samego okna dialogowego jest prosta, ale pseudoklasa tła jest konieczna, aby dodać stylizację, która dotyczy tła okna dialogowego.

Wklej następujący kod w tagu stylu w index.html:

okno dialogowe:: tło {
 tło: czarne;
nieprzezroczystość: 0.5;
}
przycisk {
 promień obramowania: 2px;
 kolor tła: biały;
 obramowanie: 1px jednolita czerń;
 margines: 5px;
 box-shadow: 1px 1px 2px szary;
}
okno dialogowe {
 maksymalna szerokość: 90vw;
 obramowanie: 1px jednolita czerń;
}

Gdy okno dialogowe jest otwarte, powinno teraz wyglądać tak:

Zbudowałeś w pełni funkcjonalne okno dialogowe.

Element dialogu to świetny sposób na budowanie modali

Korzystając z elementu dialogowego HTML, który ostatnio zyskał wsparcie we wszystkich głównych przeglądarkach, twórcy stron internetowych mogą teraz tworzyć w pełni funkcjonalne, łatwo konfigurowalne moduły i okna dialogowe z jednym znacznikiem HTML i kilkoma wierszami JavaScript bez konieczności polegania na osobach trzecich rozwiązanie.

Element dialog posiada wypełniacz utrzymywany przez zespół Google Chrome, który umożliwia programistom korzystanie z okien dialogowych w wersjach przeglądarek, które go nie obsługują.