在某些div中显示antd模态蒙版 [英] show antd modal mask in some div

问题描述

通常，当您打开模态时，蒙版(即模态后面的黑色背景)会覆盖整个屏幕.如果要在某个div中渲染黑色对话框，该如何实现，如下图所示?(红色div说)我正在使用antd模态.

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.

在此处输入图片描述

推荐答案

通常将模式安装到文档主体.(这是< body \> 标记.)但是，可以通过使用 getContainer 属性来更改此行为.请参阅文档.

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.

下一个问题是模式(和蒙版-或黑色背景")的位置为固定"，这意味着它已固定到浏览器窗口.我们需要将其更改为"absolute"(绝对)位置，以使其相对于我们要将其安装到的div.

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.

请参见工作示例:

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

这篇关于在某些div中显示antd模态蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！