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?

  • VioneTMEnglish
    2•22 days ago

    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.

    • TAPgilesOPEnglish
      1•22 days ago

      That’s sorted it up a treat, anyway–thanks!

    • TAPgilesOPEnglish
      1•22 days ago

      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…

      • VioneTMEnglish
        1•22 days ago

        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.

        • TAPgilesOPEnglish
          1•22 days ago

          Yeah… I was just not sure what “modal” means. To me, a dialog box is only a dialog box if it blocks other interactions–like an alert or prompt in JS. But I guess that’s not the case.