Dialog, czyli natywne, wyskakujące okno
Okna dialogowe są często wykorzystywane na stronach internetowych. Potrzeba ich wykorzystania nasiliła się, gdy zaczęto wprowadzać na szeroką skalę powiadomienia o ciasteczkach na stronie. Do pewnego momentu wykorzystywano po prostu pojawiający się div, jednak dzisiaj jest też natywna możliwość wykorzystania elementu
Łukasz
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.
