4.1 Element <dialog>
W HTML5 pojawił się też element <dialog>, przeznaczony do tworzenia okien dialogowych i okien modalnych na stronach internetowych. Ten element pozwala łatwo i semantycznie poprawnie tworzyć wyskakujące okna do różnych celów, takich jak powiadomienia, potwierdzenia, formularze i wiele innych. Poniżej zobaczymy, jak używać <dialog>, jakie ma atrybuty i metody, a także przykłady użycia.
Element <dialog> reprezentuje okno dialogowe lub inne interaktywne okno. Może być zarówno modalny, jak i niemodalny. Wewnątrz elementu <dialog> możesz umieścić dowolną zawartość HTML, taką jak tekst, formularze, przyciski itd.
Składnia:
<dialog>
<!-- Zawartość okna dialogowego -->
</dialog>
<div style="min-height: 200px;">
<dialog id="favSuperHeroDialog">
<form method="dialog">
<div>
<label for="favSuperHero">Ulubiony superbohater:</label>
<select id="favSuperHero" name="favSuperHero">
<option></option>
<option>Kapitan Ameryka</option>
<option>Iron Man</option>
<option>Hulk</option>
</select>
</div>
<div>
<button type="reset" id="cancel">Wyczyść</button>
<button type="submit">Potwierdź</button>
</div>
</form>
</dialog>
<button id="updateDetails">Otwórz okno dialogowe</button>
</div>
<dialog id="favSuperHeroDialog">
<form method="dialog">
<div>
<label for="favSuperHero">Ulubiony superbohater:</label>
<select id="favSuperHero" name="favSuperHero">
<option></option>
<option>Kapitan Ameryka</option>
<option>Iron Man</option>
<option>Hulk</option>
</select>
</div>
<div>
<button type="reset" id="cancel">Wyczyść</button>
<button type="submit">Potwierdź</button>
</div>
</form>
</dialog>
<button id="updateDetails">Otwórz okno dialogowe</button>
// Pobieramy przyciski i dialog z DOM
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favSuperHeroDialog");
// Funkcja sprawdzająca stan dialogu (otwarty/zamknięty)
function openCheck(dialog) {
if (dialog.open) {
console.log("Dialog rozpoczęty");
} else {
console.log("Dialog zakończony");
}
}
// Otwieramy dialog po kliknięciu przycisku Update
updateButton.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
// Zamykamy dialog po kliknięciu przycisku Cancel
cancelButton.addEventListener("click", () => {
dialog.close();
openCheck(dialog);
});
4.2 Atrybuty i metody <dialog>
Atrybut open określa, czy okno dialogowe jest otwarte. Jeśli ten atrybut jest obecny, dialog wyświetla się na stronie.
Przykład użycia atrybutu open:
<dialog open>
<p>To jest otwarte okno dialogowe.</p>
</dialog>
Okno pokazane za pomocą atrybutu open jest zawsze niemodalne. Okno modalne otwiera się metodą showModal() (o niej niżej).
Właściwość returnValue przechowuje wynik w postaci łańcucha znaków: z jaką wartością zamknięto okno. To właściwość obiektu JavaScript dialogu, a nie atrybut HTML, więc nie wpisuje się jej w znacznikach. Wartość ustawia metoda close('wartość') albo przycisk formularza z method="dialog" — wtedy do returnValue trafia value klikniętego przycisku. Jeśli okno zamknięto klawiszem Esc, returnValue się nie zmienia.
dialog.close('confirm');
console.log(dialog.returnValue); // "confirm"
Metoda show():
Otwiera okno dialogowe w trybie niemodalnym.
dialog.show();
Metoda showModal():
Otwiera okno dialogowe w trybie modalnym, blokując interakcję z resztą strony.
dialog.showModal();
Metoda close():
Zamyka okno dialogowe.
dialog.close();
Jak „podpiąć” metodę pod przycisk: minimum JavaScriptu
Atrybut open pokazuje okno od razu po załadowaniu strony. Żeby okno otwierało się i zamykało po kliknięciu przycisku, w tej lekcji wywołujemy metody show(), showModal() i close() z JavaScriptu — w zadaniach potrzebne są właśnie one. Sam język omówimy dokładnie później, na razie wystarczy taki szablon:
<button id="btn-open">Pokaż podpowiedź</button>
<dialog id="info-dialog">
<p>Tekst okna</p>
<button id="btn-close">Rozumiem</button>
</dialog>
<script>
// 1. Znajdujemy elementy strony po ich id
const openBtn = document.getElementById('btn-open');
const closeBtn = document.getElementById('btn-close');
const infoDialog = document.getElementById('info-dialog');
// 2. „Kiedy ktoś kliknie przycisk — wykonaj kod w nawiasach klamrowych”
openBtn.addEventListener('click', () => {
infoDialog.showModal(); // otwórz modalnie
});
closeBtn.addEventListener('click', () => {
infoDialog.close(); // zamknij
});
</script>
<script>umieszczamy na końcu<body>: przeglądarka wykonuje skrypt od razu, gdy tylko do niego doczyta, a elementów poniżej skryptu jeszcze nie ma —getElementByIdzwróciłbynull.document.getElementById('…')— „daj mi element o takim id”.element.addEventListener('click', () => { … })— „kiedy ktoś kliknie element, wykonaj kod w nawiasach”. Zapis() => { … }to krótka funkcja: kod, który wykona się później, po kliknięciu.- Dla okna niemodalnego zamiast
showModal()wywołajshow().
4.3 Zdarzenia <dialog>
Zdarzenie close:
Zdarzenie, które zachodzi przy zamknięciu okna dialogowego.
<div style="min-height: 200px">
<dialog id="myDialog">
<form method="dialog">
<p>Kliknij przycisk "Anuluj" lub "OK", aby zwrócić wartość</p>
<div class="dialog-buttons">
<button value="cancel">Anuluj</button>
<button value="confirm">OK</button>
</div>
</form>
</dialog>
<button id="showDialog">Pokaż okno dialogowe</button>
</div>
<dialog id="myDialog">
<form method="dialog">
<p>Kliknij przycisk "Anuluj" lub "OK", aby zwrócić wartość</p>
<div class="dialog-buttons">
<button value="cancel">Anuluj</button>
<button value="confirm">OK</button>
</div>
</form>
</dialog>
<button id="showDialog">Pokaż okno dialogowe</button>
// Pobieramy elementy DOM
const dialog = document.getElementById('myDialog');
const showDialogButton = document.getElementById('showDialog');
// Otwarcie okna modalnego
showDialogButton.addEventListener('click', () => {
dialog.showModal();
});
// Przy zamknięciu pokazujemy returnValue
dialog.addEventListener('close', () => {
alert(`Dialog zamknięty ze zwróconą wartością: ${dialog.returnValue}`);
});
Zdarzenie cancel:
Zdarzenie, które zachodzi przy anulowaniu okna dialogowego (na przykład po naciśnięciu klawisza Esc).
<div style="min-height: 200px">
<dialog id="myDialog">
<form method="dialog">
<p>Naciśnij klawisz "Esc", aby zobaczyć wynik</p>
</form>
</dialog>
<button id="showDialog">Otwórz okno dialogowe</button>
</div>
<dialog id="myDialog">
<form method="dialog">
<p>Naciśnij klawisz "Esc", aby zobaczyć wynik</p>
</form>
</dialog>
<button id="showDialog">Otwórz okno dialogowe</button>
// Pobieramy elementy DOM
const dialog = document.getElementById('myDialog');
const showDialogButton = document.getElementById('showDialog');
// Otwarcie dialogu
showDialogButton.addEventListener("click", () => {
dialog.showModal();
});
// Obsługa anulowania dialogu (klawisz Esc)
dialog.addEventListener('cancel', () => {
alert('Dialog was cancelled');
});
GO TO FULL VERSION