javascript - Cannot close <dialog> element with display set to grid - Stack Overflow

admin管理员组

文章数量:1296858

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:

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>

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>

• javascript
• html
• css
• dialog

Share Improve this question Follow asked Mar 28, 2022 at 19:15 Christian MayChristian May 33611 silver badge1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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/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

本文标签： javascriptCannot close ltdialoggt element with display set to gridStack Overflow