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
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
Przeczytaj także

Tworzymy layout bloga
W internecie można znaleźć przeróżne, gotowe szablony do niemal każdego rodzaju stron internetowych. Co w przypadku chęci stworzenia strony według własnego pomysłu? Tworzenie stron internetowych wymaga nie tylko umiejętności technicznych, ale także zmysłu artystycznego.

Obrazy responsywne
Dzisiejszy wpis chciałbym poświęcić tematowi responsywnych obrazów na stronie internetowej. Temat bardzo istotny, gdyż bardzo wiele osób przegląda strony na urządzeniach mobilnych o różnej rozdzielczości. Dlatego przygotowuje się strony tak, aby zawierały obrazy responsywne.

Zagnieżdżenie elementów HTML
Zainspirowany brakiem magii świąt, chciałbym napisać kilka (krótkich) słów na temat zagnieżdżenia elementów html. Jest to temat o tyle ciekawy, że nierzadko istnieje więcej niż jedno poprawne rozwiązanie. Moje przykłady zawarte w tym tekście są moją praktyką i uważam je za poprawne. Dzisiejszy wpis będzie na temat linków i nagłówków.