3 ms·

I got an issue recently with how <dialog> interacts with AdSense “vignette” (interstitial) ads. Vignettes set their `z-index` CSS property to the max (21474836

I got an issue recently with how <dialog> interacts with AdSense “vignette” (interstitial) ads. Vignettes set their `z-index` CSS property to the max (2147483647), but a <dialog> is still higher on the z-plane (with no way to adjust that). So if you click a link from a <dialog>, and an interstitial gets displayed, it’s under the <dialog>. It looks like nothing happened, that clicking is broken. Fix in my case was to close() the <dialog> onclick.

zachrip 2y ago
This is a feature
- palsecam 2y ago
  Yes, but that can be surprising. That you cannot adjust the z-index is disturbing, especially given that you have to style <dialog> yourself if you wanna make it look any good (as others have reported here). Also, for the record, alert() is still higher than <dialog> on the plane (see https://i.imgur.com/tzKOEF2.png https://i.imgur.com/tzKOEF2.png).
  - Sesse__ 2y ago
    FWIW, it's on a separate layer that's not affected by z-index: https://developer.mozilla.org/en-US/docs/Glossary/Top_layer https://developer.mozilla.org/en-US/docs/Glossary/Top_layer
silverwind 2y ago
Use `.show()` instead of `.showModal()` and create your own backdrop.