<dialog>
Okno dialogowe albo modal: potwierdzenie, formularz lub komunikat nad resztą strony.
- Wyświetlanie
- none (po otwarciu block)
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu (flow content)
Przykład
#<button type="button" id="open-btn">Usuń projekt</button>
<dialog id="confirm" aria-labelledby="confirm-title">
<h2 id="confirm-title">Usunąć projekt „Wizytówka”?</h2>
<p>Tej operacji nie można cofnąć.</p>
<button type="button" id="cancel-btn" autofocus>Anuluj</button>
<button type="button" id="delete-btn">Usuń</button>
</dialog>
<script>
const dialog = document.getElementById('confirm')
document.getElementById('open-btn').addEventListener('click', () => dialog.showModal())
document.getElementById('cancel-btn').addEventListener('click', () => dialog.close())
document.getElementById('delete-btn').addEventListener('click', () => dialog.close())
</script>Definicja i zastosowanie
#Element <dialog> tworzy okno dialogowe. Domyślnie jest ukryte, a otwierasz je w JavaScripcie: metoda showModal() pokazuje je jako modal nad całą stroną, z przyciemnionym tłem, a show() jako zwykłe okienko, które nie blokuje reszty strony. Metoda close() zamyka okno.
Modal otwarty przez showModal() robi za Ciebie trudne rzeczy: przenosi fokus do okna, blokuje interakcję z resztą strony, zamyka się klawiszem Escape i trafia do warstwy nad wszystkimi elementami (tzw. top layer), więc nie musisz walczyć z z-index. Tło za oknem ostylujesz pseudoelementem ::backdrop.
Formularz z method="dialog" umieszczony w oknie zamyka je po kliknięciu przycisku i zapisuje jego value we właściwości returnValue, dzięki czemu wiesz, co wybrał użytkownik. Od grudnia 2025 roku okno otworzysz też bez JavaScriptu, przyciskiem z atrybutami commandfor i command="show-modal".
Składnia
#<dialog id="okno">
…
</dialog>Atrybuty
#atrybut logiczny
Okno jest widoczne. Atrybut wpisany w kodzie pokazuje okno jako niemodalne, bez przyciemnienia i bez blokowania strony. Do otwierania i zamykania używaj metodshow(),showModal()iclose(), zamiast samodzielnie dodawać lub usuwać ten atrybut.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#open
atrybut logicznyOkno jest widoczne. Atrybut wpisany w kodzie pokazuje okno jako niemodalne, bez przyciemnienia i bez blokowania strony. Do otwierania i zamykania używaj metod show(), showModal() i close(), zamiast samodzielnie dodawać lub usuwać ten atrybut.
<dialog open>
<p>Masz nieukończoną lekcję: <strong>Listy w HTML</strong>.</p>
<button type="button" onclick="this.closest('dialog').close()">Później</button>
</dialog>Więcej przykładów
#<button type="button" id="rate-btn">Oceń lekcję</button>
<p id="result"></p>
<dialog id="rate-dialog" aria-labelledby="rate-title">
<form method="dialog">
<h2 id="rate-title">Jak oceniasz lekcję?</h2>
<button value="słabo">Słabo</button>
<button value="dobrze">Dobrze</button>
<button value="świetnie">Świetnie</button>
</form>
</dialog>
<script>
const dialog = document.getElementById('rate-dialog')
const result = document.getElementById('result')
document.getElementById('rate-btn').addEventListener('click', () => {
dialog.returnValue = ''
dialog.showModal()
})
dialog.addEventListener('close', () => {
result.textContent = dialog.returnValue ? 'Twoja ocena: ' + dialog.returnValue : 'Zamknięto bez oceny'
})
</script>Każdy przycisk w formularzu z method="dialog" zamyka okno i zapisuje swoje value w dialog.returnValue. Escape zamyka okno bez zmiany tej wartości.
<button type="button" commandfor="quiz-rules" command="show-modal">Zasady quizu</button>
<dialog id="quiz-rules" aria-labelledby="quiz-title">
<h2 id="quiz-title">Zasady quizu</h2>
<p>Masz 10 minut na 5 pytań. Każde ma jedną poprawną odpowiedź.</p>
<button type="button" commandfor="quiz-rules" command="close">Rozumiem</button>
</dialog>Atrybuty commandfor i command działają we wszystkich głównych przeglądarkach od grudnia 2025 roku. W starszych wersjach przycisk nic nie zrobi.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
dialog:not([open]) {
display: none;
}
dialog {
position: absolute;
inset-inline: 0;
width: fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 1em;
background-color: Canvas;
color: CanvasText;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.1);
}Obsługa przeglądarek
#Szeroko dostępne · od 2022 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie dodawaj atrybutu
openręcznie, jeśli potrzebujesz modala. TylkoshowModal()blokuje resztę strony i obsługuje klawisz Escape. - Nadaj oknu nazwę przez
aria-labelledbywskazujące jego nagłówek, żeby czytnik ekranu od razu ogłosił, czego dotyczy okno. - Przy potwierdzaniu nieodwracalnych akcji ustaw
autofocusna bezpiecznym przycisku, na przykład „Anuluj”.
Powiązane hasła
#- <form>Formularz, który zbiera dane od użytkownika i wysyła je pod wskazany adres.
- <button>Klikalny przycisk: wysyła formularz, czyści go albo uruchamia akcję na stronie.
- <details>Rozwijana sekcja: nagłówek `<summary>` widać zawsze, a resztę treści po kliknięciu.
- <template>Niewidoczny szablon HTML, który skrypt kopiuje i wstawia na stronę.
Widzisz błąd albo brakuje przykładu? Napisz do nas.