Tengo un componente Modal , que usa el modal de Bulma CSS:

 <script> import { createEventDispatcher } from 'svelte'; export let active; export let closeable = true; const dispatch = createEventDispatcher(); const closeModal = () => { active = false; dispatch("closeModal"); }; const closeModalSoft = () => { if (closeable) { closeModal(); } }; const closeModalKeyboard = (event) => { if (event.key === "Escape" && closeable) { closeModal(); } }; </script> <svelte:window on:keydown={closeModalKeyboard}/> <div class="modal is-clipped" class:is-active={active}> <div class="modal-background" on:click={closeModalSoft}/> <div class="modal-content"> <div class="container"> <slot /> </div> </div> {#if closeable} <button class="is-large modal-close" aria-label="close" on:click={closeModal}/> {/if} </div>

Debe permitir el anidamiento arbitrario, por lo que puede, por ejemplo, tener un modal sobre un modal sobre el resto del sitio web.

Me gustaría permitir que los modales se cierren presionando el botón Cerrar, haciendo clic fuera del modal o usando la tecla Escape. Me gustaría que esto funcione como una pila: el modal superior se cierra primero. (Nota: si un modal no se closeable como se muestra en mi código, solo significa que el modal solo se puede cerrar mediante la manipulación active externamente).

Actualmente, el botón de cerrar y hacer clic fuera del modal funcionan con modales anidados. Sin embargo, escape siempre cerrará todos los modales, en lugar de solo el superior. Pero, dado el código, creo que esto es de esperar.

¿Qué necesitaría cambiar para que solo se cierre el modal superior ( closeable=true )?

He pensado en los siguientes enfoques, pero siento que debe haber mejores formas:

• Al escapar, determine el elemento en el centro de la pantalla, y solo si su ID es igual a alguna ID que le daré a cada modal, ciérrelo.
• Al escapar, consulte el elemento DOM y vea si tiene hijos/hermanos después de sí mismo que tengan las clases modal y is-active . Si es así, ignore la pulsación de tecla.
• Quizás use :focus u otros modificadores en el elemento superior y luego un enfoque similar al anterior.