Tagi HTML: dialog

Element <dialog> to jeden z najbardziej niedocenianych tagów HTML5, który pozwala tworzyć okna dialogowe i modale bezpośrednio w HTML, bez ciężkich bibliotek i nadmiarowego JavaScriptu.

To natywne rozwiązanie upraszcza tworzenie potwierdzeń, formularzy i komunikatów, a przy tym jest semantyczne i dostępne.

Czym jest element `<dialog>` i do czego służy?

<dialog> definiuje okno dialogowe lub podokno, które pojawia się ponad treścią strony. Sprawdza się do popupów, ostrzeżeń, pytań i potwierdzeń, a także zaawansowanych formularzy.

Dialog może pracować w dwóch trybach: niemodalnym (użytkownik nadal może korzystać z reszty strony) oraz modalnym (interakcje z tłem są wstrzymane aż do zamknięcia okna).

Element nie ma wymaganych atrybutów ani potomków — podstawowa składnia to <dialog>...</dialog>. Tagi otwierający i zamykający są obowiązkowe.

Domyślne zachowanie CSS wygląda następująco:

display: none (gdy przeglądarka nie wspiera elementu lub brak atrybutu open),
display: block (po dodaniu atrybutu open w obsługiwanych przeglądarkach),
position: absolute, białe tło, padding i border dla czytelności.

Wsparcie przeglądarek jest bardzo dobre w aktualnych wersjach Chrome, Firefox, Safari i Edge (pełna obsługa modalna od 2023+).

Atrybut `open` — klucz do widoczności dialogu

Atrybut logiczny open steruje widocznością okna dialogowego — bez niego dialog jest ukryty.

Podstawowy przykład otwartego dialogu z wyborem koloru:

<dialog open><h1>Wybór koloru</h1><p>Wybierz interesujący Cię kolor.</p><label>Twój kolor: <input type="color"></label></dialog>

Ten sam przykład z wysyłką danych formularza:

<dialog open><h1>Wybór koloru</h1><form action="https://example.com/submit"><label>Twój kolor: <input type="color" name="kolor"></label><button type="submit">Zatwierdź</button></form></dialog>

Bez atrybutu open dialog jest niewidoczny — idealny do otwierania na żądanie przez JavaScript.

Dialog modalny vs niemodalny — różnice w praktyce

Dialog niemodalny otwierasz metodą show(); użytkownik może nadal wchodzić w interakcję z resztą strony, a okno zamykasz skryptowo (close()) lub przyciskiem w interfejsie.

Dialog modalny otwierasz metodą showModal(); tło zostaje zablokowane, a domyślnie dozwolone jest zamknięcie przez ESC i kliknięcie w backdrop (o ile nie anulujesz zdarzenia cancel).

Aby szybko porównać najważniejsze metody i atrybuty, skorzystaj z poniższej ściągi:

Nazwa	Typ	Cel	Blokuje tło	Domyślne zamykanie
open	atrybut logiczny	pokazuje/ukrywa dialog (bez JS)	nie	brak
show()	metoda	otwiera dialog w trybie niemodalnym	nie	brak (zamykasz skryptowo lub przyciskiem)
showModal()	metoda	otwiera dialog w trybie modalnym	tak	ESC i klik w backdrop (jeśli nie anulujesz „cancel”)
close(value)	metoda	zamyka dialog i ustawia `returnValue`	—	—
returnValue	właściwość	odczyt wyniku interakcji (np. wartość przycisku)	—	—

Minimalne przykłady użycia w JS:

document.getElementById('nonModalDialog').show(); /* ... */ document.getElementById('nonModalDialog').close();
document.getElementById('modalDialog').showModal();

Formularz z method="dialog" automatycznie zamyka okno i ustawia returnValue.

<form method="dialog">...<button value="potwierdz">Potwierdź</button>...</form>
dialog.addEventListener('close', () => console.log(dialog.returnValue));

Stylowanie `<dialog>` w CSS — pełna kontrola

Domyślny wygląd to biały prostokąt, ale możesz dopracować layout, cienie i responsywność. Wykorzystuj selektory dialog, dialog[open] i dialog::backdrop, a także media query i zmienne CSS.

Przykładowa, zwięzła konfiguracja stylów:

dialog{max-width:600px;width:min(90vw,600px);border:0;padding:1.25rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}dialog[open]{display:block}dialog::backdrop{background:rgba(0,0,0,.5)}

Wskazówki, które pomagają utrzymać spójny wygląd:

używaj selektora dialog[open] do nadpisywania widoczności i animacji otwierania/zamykania,
projektuj szkło tła przez ::backdrop — dobierz kolor i przezroczystość do brandu,
zadbaj o tryb ciemny (np. @media (prefers-color-scheme: dark)) oraz wyraźny focus dla dostępności.

::backdrop to natywny overlay dostępny wyłącznie w trybie modalnym.

Zaawansowane przykłady i najlepsze praktyki

1. Dialog z potwierdzeniem usunięcia

Obsłuż wynik działania przez returnValue i zdarzenie close:

const dialog = document.getElementById('confirmDialog'); dialog.showModal(); dialog.addEventListener('close', () => { if (dialog.returnValue === 'potwierdz') { console.log('Usunięto!'); } });

2. Komponent wielokrotnego użytku

Buduj dialogi z szablonu <template> i klonuj je na żądanie — unikniesz duplikacji HTML i ułatwisz testy.

const tpl = document.getElementById('tplDialog'); const node = tpl.content.cloneNode(true); document.body.appendChild(node); document.getElementById('dialog').showModal();

Pamiętaj o podstawach dostępności w dialogach:

dodaj aria-label lub aria-labelledby do dialogu i ustaw autofocus na pierwszym sensownym elemencie,
obsłuż zdarzenie cancel, jeśli chcesz zablokować zamykanie klawiszem ESC,
wiąż formularze z etykietami przez <label for="..."></label> i dopasowane id,
zapewnij odpowiedni kontrast i widoczny stan focus w stylach.

Kontekst użycia: <dialog> możesz umieszczać w treści ogólnej (flow content). Interfejs DOM to HTMLDialogElement z metodami show(), showModal(), close().

Ograniczenia i fallbacki

Jeśli celujesz w pełną zgodność i lepsze UX, uwzględnij te kwestie:

Starsze przeglądarki – użyj sprawdzonego polyfillu (np. dialog-polyfill) i warunkowego ładowania skryptu;
Animacje – dodaj @keyframes lub animate() w JS i koordynuj zamykanie z końcem animacji;
Złożone interakcje – połącz dialog z walidacją, zarządzaniem fokusem i blokadą scrolla tła;
Treści osadzone – iframe w dialogu może wymagać dodatkowej kontroli fokusa i rozmiaru.

Element <dialog> znacząco upraszcza tworzenie interfejsów: jest prosty, semantyczny i ma natywne wsparcie przeglądarek.

Czym jest element <dialog> i do czego służy?

Atrybut open — klucz do widoczności dialogu