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?

  • 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.