La función HtmlDialogElement.close() parece no tener efecto en un elemento <dialog> cuando ese cuadro de diálogo tiene su estilo de display establecido en grid .
¿Alguien sabe por qué? Tenga en cuenta que la eliminación de la display: grid permite que el cuadro de diálogo funcione correctamente. He visto este comportamiento en las últimas versiones de Chrome y Firefox.
Ver reproducción mínima a continuación. Si lo prefieres, aquí tienes un Codepen: https://codepen.io/ChristianMay/pen/MWrmdzJ
let dialog = document.querySelector('dialog') let closeButton = document.querySelector("#dialog-close"); closeButton.addEventListener('click', () => { dialog.close(); }) dialog { display: grid; } <dialog class="dialog" open=""> Test </dialog> <button id="dialog-close">Close dialog</button>El cuadro de diálogo se considera abierto (o mostrado) si el atributo open está presente.
Una vez que este atributo no está presente, el cuadro de diálogo se oculta. Supongo que configurar la pantalla en cuadrícula anula el estilo predeterminado para el diálogo, que debería ocultar el diálogo cada vez que se elimina la open . Podríamos restaurar este comportamiento agregando estilo al cuadro de diálogo sin atributo open .
let dialog = document.querySelector('dialog') let closeButton = document.querySelector("#dialog-close"); closeButton.addEventListener('click', () => { dialog.close(); }) dialog:not([open]){ display:none; } dialog{ display:grid; } <dialog class="dialog" open=""> Test </dialog> <button id="dialog-close">Close dialog</button>Ya respondí , pero también podría mostrar <dialog> como una cuadrícula solo si es un diálogo abierto ;)
dialog[open] { display: grid; }https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
El selector de atributos de CSS coincide con los elementos en función de la presencia o el valor de un atributo dado.
Fragmento de demostración con el selector de atributos CSS
const dialog = document.querySelector('dialog') let closeButton = document.querySelector("#dialog-close"); closeButton.addEventListener('click', () => { dialog.removeAttribute("open"); }) let openButton = document.querySelector("#dialog-open"); openButton.addEventListener('click', () => { dialog.setAttribute("open", ""); }) dialog[open] { display: grid; } <dialog class="dialog" open=""> Test </dialog> <button id="dialog-close">Close dialog</button> <button id="dialog-open">Open dialog</button>