Blur out the background of dialog specifically a table or div in the background

[vinuthakaranth]

Hi Team,

Is there a way to specifically blur out the background of dialog something like below? Background can be a div or table.

Also make a dialog appear just on part of page specifically on a div.

I tried using DialogSurface as in doc below but didn't apply to the backdrop. I might be missing something in implementation. Any help or direction to proceed with this is really appreciated.
https://react.fluentui.dev/?path=/docs/components-dialog--default

I tried simple example by setting backdrop but didn't work as expected.

Codesandbox link

If there is any example or doc I can refer too would be really helpful.

[khmakoto]

Hi @vinuthakaranth, you were on the right track! The only thing you missed is that passing JSX to a slot renders that as the children of the slot tag, so you were missing having the new backdrop div take all the width and height of its parent. You can see it working here.

https://codesandbox.io/p/sandbox/dialogsurface-with-custom-backdrop-3nhfks

[vinuthakaranth]

Thanks a lot @khmakoto for the quick response! I have a follow up question, is there a way to make dialog and backdrop to appear just on part of the page like on just a detail list/div in sandbox example? Is there any prop I can use directly? Thanks in advance for your help.

Codesandbox link

[khmakoto]

@vinuthakaranth and I talked about this offline and it seemed like she wanted this same thing but on v8, after some back and forth we landed on the following example that covers everything she needed.

https://codepen.io/khmakoto/pen/WNmdWjw?editors=0010