3 ms·

Try this: body:has(dialog[open]) { overflow: hidden } body:has(dialog[open])::before { content: ""; position: fixed; top: 0; left: 0

Try this: body:has(dialog[open]) { overflow: hidden } body:has(dialog[open])::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(4px); background-color: rgb(0, 0, 0, 0.5); }

mg 4y ago
Have you tried it? Here in Firefox, it does not work. https://jsfiddle.net/t34wz6kx/ https://jsfiddle.net/t34wz6kx/ Also, using "position: fixed" will fail when the dialog is longer than the screen. Then the user cannot read it all, and if the close button is at the bottom, they cannot close it.
- karlshea 4y ago
  Firefox also doesn't support :has. There's some more information on MDN [0] about how to make a modal dialog, you can open one in JavaScript using showModal() which has a backdrop, is actually modal, etc. [0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
  - mg 4y ago
    Nice! https://jsfiddle.net/5gevzft8/1/ https://jsfiddle.net/5gevzft8/1/ Looks like you cannot use a button in the dialog then though. As it somehow makes the dialog scroll to the bottom.
    - derefr 4y ago
      Your "cannot use" is my "element has proper accessibility consideration for people who are viewing the dialog inside a webview that disables scrolling." With the buttons always starting in scrolled-into-view and in focus, those people can at least dismiss the modal!
    - MrJohz 4y ago
      This is the spec behaviour - the browser focus should immediately jump to the first focusable item in the page for accessibility reasons. (As I understand it, this is the norm for dialogs outside the browser.) My understanding is that you should be doing two things here: firstly, dialogs shouldn't generally be scrollable by themselves (or if they are, the interaction buttons should be sticky so that they're always visible). Instead, if you've got long text (say T&Cs) that should be in a scrollable box of its own. This allows the user to see the whole dialog (interactions and all) at once. Secondly, if there is something that should take focus before the buttons do, then you should set autofocus on that element explicitly. So in this case, you'd wrap the long text in a scrollable div, and add an "autofocus" attribute to that div to ensure that keyboard based users will immediately jump to it and be able to scroll it with their keyboard.

mg 4y ago

Have you tried it? Here in Firefox, it does not work. https://jsfiddle.net/t34wz6kx/ https://jsfiddle.net/t34wz6kx/ Also, using "position: fixed" will fail when the dialog is longer than the screen. Then the user cannot read it all, and if the close button is at the bottom, they cannot close it.

karlshea 4y ago
Firefox also doesn't support :has. There's some more information on MDN [0] about how to make a modal dialog, you can open one in JavaScript using showModal() which has a backdrop, is actually modal, etc. [0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
- mg 4y ago
  Nice! https://jsfiddle.net/5gevzft8/1/ https://jsfiddle.net/5gevzft8/1/ Looks like you cannot use a button in the dialog then though. As it somehow makes the dialog scroll to the bottom.
  - derefr 4y ago
    Your "cannot use" is my "element has proper accessibility consideration for people who are viewing the dialog inside a webview that disables scrolling." With the buttons always starting in scrolled-into-view and in focus, those people can at least dismiss the modal!
  - MrJohz 4y ago
    This is the spec behaviour - the browser focus should immediately jump to the first focusable item in the page for accessibility reasons. (As I understand it, this is the norm for dialogs outside the browser.) My understanding is that you should be doing two things here: firstly, dialogs shouldn't generally be scrollable by themselves (or if they are, the interaction buttons should be sticky so that they're always visible). Instead, if you've got long text (say T&Cs) that should be in a scrollable box of its own. This allows the user to see the whole dialog (interactions and all) at once. Secondly, if there is something that should take focus before the buttons do, then you should set autofocus on that element explicitly. So in this case, you'd wrap the long text in a scrollable div, and add an "autofocus" attribute to that div to ensure that keyboard based users will immediately jump to it and be able to scroll it with their keyboard.