Dialog, czyli natywne, wyskakujące okno

Wstęp

Obecnie przeglądarki używają element <dialog>, który ułatwia tworzenie okien dialogowych i tzw. lightbox’ów. Dzięki JavaScript można wywoływać metody, aby otworzyć lub zamknąć element dialog, lub dowiedzieć się, kiedy okno zostało zamknięte przez zdarzenie.

Jak to działa?

Domyślnie element <dialog> jest ukryty na stronie. W momencie wykonania się metody showModal() element otrzymuje atrybut open i jest wyświetlany na ekranie. Zamknięcie okna odbywa się przy pomocy metody close().

Podstawowy kod okna dialogowego wygląda następująco:

<dialog id="modal">
	<form method="dialog">
		<label>Imię</label>
		<input type="text" name="name" />
		<button>Przejślij</button>
	</form>
</dialog>

Taka konstrukcja to nic innego jak pobranie od użytkownika imienia za pomocą formularza. Jak już wyżej wspomniałem, okno domyślnie jest ukryte. Oto jak wyświetlić element dialog:

document.querySelector("#modal").showModal()

Z kolei zamknięcie to poniższy kod:

document.querySelector("#modal").close()

Eventy okna dialogowego

Definiujemy zdarzenia potrzebne do określenia, co stało się z naszym formularzem w oknie dialogowym:

const modal = document.querySelector("#modal");

// gdy okno zostało zamknięte
modal.addEventListener('close', function() {
	if(modal.returnValue === 'SUBMITTED')
		alert('Przesłano formularz poprawnie');
	else if(modal.returnValue === 'CANCELLED')
		alert('Przesyłanie wstrzymane');
});

// gdy user zamknął okno dialogowe
modal.close('CANCELLED');

// gdy user przesłał poprawnie formularz wewnątrz
modal.close('SUBMITTED');

Tło poza elementem dialog

Jest możliwość określenia jakie style otrzyma tło dookoła elementu dialog. Należy zdefiniować pseudo-selektor ::backdrop w następujący sposób:

#modal::backdrop {
	background: rgba(0,0,0,0.3);
}

To pozwoli nam na przyciemnienie tła poza modalem, aby skupić uwagę użytkownika na samym oknie dialogowym.

Wsparcie przeglądarek