在某些 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.
推荐答案
通常模态被挂载到文档主体.(这是 标记.)但是可以通过使用 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.
下一个问题是模态(和遮罩——或黑色背景")的位置固定"，这意味着它被固定到浏览器窗口.我们需要将其更改为绝对"位置，以便它与我们要将其安装到的 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屋！
