Skip Navigation
Perchance - Create a Random Text Generator @lemmy.world TAPgiles @lemmy.world

Dialog have no Backdrops?

The <dialog> tag has a built-in backdrop that you can style to hide the page, etc. But that seems to not work on perchance for some reason. Any idea on how to get this to work, and what is blocking the functionality?

6
6 comments

  • It should be working fine, here's a demo: https://perchance.org/szubdx3v1m#edit though I think only .showModal() applies the backdrop. .show() doesn't.

    From MDN Web Docs:

    The CSS ::backdrop pseudo-element can be used to style the backdrop of a modal dialog, which is displayed behind the <dialog> element when the dialog is displayed using the HTMLDialogElement.showModal() method. For example, this pseudo-element could be used to blur, darken, or otherwise obfuscate the inert content behind the modal dialog.

    • Huh! Very weird... Didn't realise there were 2 versions of showing a dialog.

      According to MDN:

      Use the .showModal() method to display a modal dialog and the .show() method to display a non-modal dialog.

      I don't even know what "modal" vs "non modal" means 😅

      I guess that's also why it wasn't centring itself properly. What's the point of a dialog if it doesn't have those "modal" features, I wonder...

      • Modal dialog means you can't interact with the page behind the dialog when it is open e.g. click buttons. Non-modal, you can interact with the page even if the dialog is open.

        Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.

    • That's sorted it up a treat, anyway--thanks!

6 comments