Gdy otwarte jest okno modalne, użytkownicy oczekują, że będą mogli je zamknąć za pomocą znanych elementów sterujących: naciśnięcia klawisza Esc na klawiaturze, przycisku Wstecz lub gestu na platformach mobilnych albo gestu zamknięcia w technologiach wspomagających osoby z niepełnosprawnością.
Gdy po raz pierwszy wprowadzono element <dialog>, można go było zamknąć za pomocą klawisza Esc, ale nie za pomocą innych elementów sterujących platformy, takich jak przycisk Wstecz lub gest na urządzeniu mobilnym. Dzięki dodaniu atrybutu closedby do elementów <dialog> rozszerzone zachowanie polegające na reagowaniu na więcej elementów sterujących specyficznych dla platformy w przypadku żądań zamknięcia zostało zastosowane do elementów <dialog>, które są otwierane w stanie modalnym (czyli gdy są otwierane imperatywnie za pomocą metody showModal() elementu <dialog> w języku JavaScript lub deklaratywnie za pomocą polecenia wywołującego show-modal). Jeśli więc deweloperzy używają już elementu <dialog>, nie muszą wprowadzać żadnych zmian.
<!-- MANDATORY: must be opened with either `showModal()` with JavaScript or the `show-modal` command using declarative command invokers in order respond to close requests including platform-specific controls. -->
<dialog aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests.</p>
</dialog>
Gdy okno jest otwarte w trybie modalnym, okno bez atrybutu closedby reaguje na żądania zamknięcia tak samo jak w przypadku jawnego ustawienia atrybutu closedby na closerequest.
<!-- This is unnecessary as it is the default behavior for modal dialogs -->
<dialog closedby="closerequest" aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests.</p>
</dialog>
Jeśli chcesz też, aby okno można było zamknąć, klikając poza nim, musisz ustawić closedby na any:
<dialog closedby="any" aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests and light dismiss.</p>
</dialog>
Strategie zastępcze
Elementy <dialog> otwarte w stanie modalnym można już zamknąć za pomocą klawisza Esc, więc nie jest potrzebne żadne rozwiązanie zastępcze. Nie ma dobrego sposobu na implementację żądań zamknięcia za pomocą przycisku Wstecz lub gestów na urządzeniach mobilnych, więc prościej jest traktować tę funkcję jako progresywne ulepszanie, zwłaszcza że istnieją inne sposoby na zamknięcie okna modalnego. Podobnie zachowanie polegające na zamknięciu elementu <dialog> za pomocą closedby="any" można uznać za progresywne ulepszanie.