在某些 div 中显示 antd 模态掩码

Question

通常，当您打开模态时，遮罩（即模态后面的黑色背景）会覆盖整个屏幕。如果我想在某些div中渲染黑色对话框，如下图所示，我该如何实现？（红色 div 说）我正在使用 antd modal。

Answer 1

通常，模式被安装到文档的正文中。（这是<body\>标签。）但是可以通过使用getContainer属性来更改此行为。请参阅文档。

下一个问题是模态（和蒙版 - 或“黑色背景”）的位置“固定”，这意味着它固定在浏览器窗口上。我们需要将其更改为“绝对”位置，以便它相对于我们想要将其安装到的 div 而言。

请参阅工作示例：

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

Answer 2

这是 ANTD 不可能实现的。

Ant Design 将模态挂载到 DOM 的独立部分，位于 React 的主 DOM 树之外，类似于 React Portal。这是处理模态框、灯箱等的标准方法。

您必须实现自己的覆盖层，该覆盖层绝对受限于其父容器。