dialog's ::backdrop won't transition | w3schools | Page 1

carmine crypt Jun 4, 2025, 8:30 PM

#

Hello friends. In the above example, I've made a dialog modal appear when the user clicks a button. I want to transition the modal's ::backdrop psuedo-element background-color to make it look nice, however I haven't been able to figure out why the code doesn't work. I've based it off of this showcase: https://codepen.io/web-dot-dev/pen/NWEQYaG.

CodePen

Zowie

::backdrop of Modal Dialog won't transition

...

light palm Jun 4, 2025, 8:37 PM

#

carmine crypt https://codepen.io/dzowzie/pen/raVjjxb Hello friends. In the above example, I'v...

You can try to use keyframes instead.
I think the problem here is that the backdrop is not just hidden with display:none; or anything like that, the backdrop doesnt exist until you actually toggle the modal, and that is why it fails i believe. So, you may need to use keyframes for this one.

I have not worked a lot with the dialog tag, only used it a couple of times... But i think this would be the best solution

#

Yeah, it works for the fade in at least... But not for the fade out, because the backdrop is removed instantly, if this can somehow be delayed, the problem could be solved with fadeout too

#

https://codepen.io/tok124/pen/azOpJzB

CodePen

Tim

::backdrop of Modal Dialog won't transition

...

#

I just remembered Kevin Powell has a video about this...
https://www.youtube.com/watch?v=4prVdA7_6u0

YouTube

Kevin Powell

Animate from display none

A common problem people ask me about is animating from, or to display: none, since it's not an animatable property.

After making my recent video on the dialog element, I got a lot of questions about animating it in and out, and it just so happens to use display: none when it's closed, so I saw it as a good opportunity to take a look at it.

...

▶ Play video

carmine crypt Jun 4, 2025, 9:08 PM

#

nice! it looks like it doesn't work on Firefox sadly. instead I could transition the dialog's opacity itself rather than the backdrop when Firefox is detected via @-moz-document

light palm Jun 4, 2025, 9:09 PM

#

Yeah possibly 🙂

carmine crypt Jun 4, 2025, 9:49 PM

#

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event#canceling_a_dialog

MDN Web Docs

HTMLDialogElement: cancel event - Web APIs | MDN

The cancel event fires on a <dialog> element when the user instructs the browser that they wish to dismiss the current open dialog. The browser fires this event when the user presses the Esc key.

#

interesting, the 'cancel' event doesn't invoke for me on Chrome or on Firefox.

light palm Jun 4, 2025, 9:53 PM

#

carmine crypt interesting, the 'cancel' event doesn't invoke for me on Chrome or on Firefox.

Hmm strange... Should work in all browsers, maybe you're not using it properly or it does work only that you don't know it works

#

I think it's this one... So if your browser is not like 50 years old, it should work ^^

carmine crypt Jun 4, 2025, 10:00 PM

#

strange... if you click the Close button, does the MDN example pen update the result element's textContent for you?

light palm Jun 4, 2025, 10:08 PM

#

carmine crypt strange... if you click the Close button, does the MDN example pen update the `r...

It opens and closes the modal for me if thats what you meant

carmine crypt Jun 4, 2025, 10:11 PM

#

light palm It opens and closes the modal for me if thats what you meant

Ohh, I misunderstood the 'cancel' event. It fires if the user presses escape, not when the close button is pressed.

#

The event I needed was the 'close' event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement#events

light palm Jun 4, 2025, 10:29 PM

#

carmine crypt The event I needed was the 'close' event: https://developer.mozilla.org/en-US/do...

Yeah, that is exactly why i said or it does work only that you don't know it works

#dialog's ::backdrop won't transition