Material UI React Modal Dialog on custom container

Question

I'm trying to show a dialog that's only partially modal, as in modal over a specific element, so that the user can still interact with other parts of the application. The docs specify that a dialog component has a container and a fullscreen property. I've tried setting the container property to the div element I want to render the dialog and backdrop on. But without any luck.

I want to modal to only be modal on this part of the application as shown in the image.

Here are the docs for the Dialog component https://material-ui-next.com/api/dialog/

Any help would be greatly appreciated!

Answer 1

I ran into the same issue. It's not documented in the <Dialog /> section, but if you look at the API docs for the <Modal /> component there is a prop called 'container' and since Dialog is really just a modified Modal component you're good to use the same props...

<Dialog
    container={() => document.getElementById('parentCo')}>
</Dialog>