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 below image? (the red div say) I am using antd modal.
2 Answers
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
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.
You must implement your own overlay that is absolutely constrained to its parent container.
Related