The dialog is considered to be open (or shown) if the attribute open is present.
Once this attribute is not present, the dialog is hidden. I suppose that setting the display to grid overrides the default styling for dialog, which should hide the dialog whenever open is removed. We could restore this behavior by adding styling to the dialog without open attribute.
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>
Already answered , but you could also display <dialog> as a grid only if it is an opened dialog 😉
dialog[open] {
display: grid;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
The CSS attribute selector matches elements based on the presence or value of a given attribute.
Demo snippet using the CSS attribute selector
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>
fork of your pen
The HtmlDialogElement.close() function seems to have no effect on a <dialog> element when that dialog has its display style set to grid.
Does anyone happen to know why? Note that removing the display: grid allow the dialog to function correctly. I have seen this behavior on the latest versions of both Chrome and Firefox.
See minimum reproduction below. If you prefer, here’s a 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>
It looks like that’s the case – if you inspect the dialog after it fails to close (once the “open” attribute is gone), it looks like both Firefox and Chrome show the following style as applying from the user agent stylesheet:
You’re absolutely right! An even more elegant solution.
