Show Antd Modal Mask In Some Div

Normally when you open modal, the mask, i.e. the black background behind the modal spans entire screen. How can I achieve if I want to render the black dialog in some div, as in be

Solution 1:

Normally the modal is mounted to the body of the document. (This is the <body\> tag.) It is however possible to change this behaviour by using the getContainer attribute. See documentation.

The next problem would be that the modal (and the mask -- or 'black background') have the position 'fixed', which means that it is fixed to the browser window. We need to change this to position 'absolute' instead, so that it would be relative to the div we want to mount it to.

See working example:

https://codesandbox.io/s/c9e5af93-09f2-421d-a8c1-3bbfeb1416fe-olcqd

Solution 2:

This is not possible with antd.

Ant Design mounts modals to a separate part of the DOM, outside React's primary DOM tree, similar to React Portal. This is the standard way of handling modals, lightboxes, etc.

See here

You must implement your own overlay that is absolutely constrained to its parent container.