Javascript 如何使用react使类似于div的弹出窗口出现在包含它的div之外？

单击按钮时会显示一个对话框。我想在包含该对话框的div之外显示该对话框。 此对话框div位于overlay div内。此overlay div应覆盖整个屏幕，且对话框div位于屏幕的中心

下面是我的代码，它显示了压缩在包含它的div中的对话框div

function Parent() {
    return (
        <Wrapper>
            <GridView/> 
        </Wrapper>
    );
}

const Wrapper = styled(div)`
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 1;
    flex: 1;
`;

function GridView() {
    return (
        <GridViewWrapper>
            <Cards>
                {items.map((item, index) => {

                    return (
                        <Card>
                           <Content to={toSomeUrl} />
                           <Footer>
                               <Name to={toSomeUrl}>
                                   <span>{item.name} </span> 
                                   <span>some</span>
                               </Name>
                               <ItemDialog/>
                           </Footer>
                       </Card>
                   );
               })}
           </Cards>
       </GridViewWrapper>
   );

函数父函数（）{
返回(
);
}
const Wrapper=styled（div）`
显示器：flex；
弯曲方向：立柱；
位置：相对位置；
调整内容：灵活启动；
溢出：隐藏；
z指数：1；
弹性：1；
`;
函数GridView（）{
返回(
{items.map（（项，索引）=>{
返回(
{item.name}
一些
);
})}
);

}

const GridViewWrapper=styled.div`
最大高度：计算（100vh-136px）；
显示器：flex；
溢出x：隐藏；
溢出y：滚动；
`;
const Cards=styled.div`
显示器：flex；
柔性包装：包装；
最小高度：计算（${56px*1.5}）；
填料：0 calc（50vw-600px）；
@媒体屏幕和屏幕（最大宽度：1320px）{
填料：0 calc（50vw-400px）；
}
`;
const Card=styled.div`
最大宽度：324px；
高度：56px；
宽度：钙（33.33%-16px）；
@媒体屏幕和屏幕（最大宽度：1320px）{
宽度：计算（50%-16px）；
}
利润率：8px；
显示器：flex；
弯曲方向：立柱；
对齐项目：柔性端；
背景图像：url（${props=>props.$bgUrl}）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
`;
函数ItemDialog（）{//此函数包含按钮和覆盖对话框
返回(
点击我
{isDialogOpen&&
{setDialogOpen（false）}>
//某某
}
);
}
const Wrapper=styled.div`
显示器：flex；
弯曲方向：立柱；
右边距：16px；
左边距：16像素；
`;
const Overlay=styled.div`
位置：固定；
顶部：60px；
底部：20px
左：0；
右：0；
背景滤镜：模糊（8px）；
z指数：100；
显示器：flex；
`;
const Dialog=styled.div`
宽度：384px；
最大高度：计算（100%-200px）；
显示器：flex；
弯曲方向：立柱；
`;

---

我不知道如何解决这个问题。有人能帮我吗？谢谢。

你能用模态中的固定位置把它放到全局上下文中吗

或者，您可以使用react门户将react元素锚定到DOM树外部的标记上

---

只需使用更高的z索引固定对话框位置，然后使用覆盖图和较小的屏幕中心尺寸即可。标准的modalthanks，但我已经尝试了位置：固定在对话框上，它仍然是一样的。叠加未占用屏幕的宽度和高度。

const GridViewWrapper = styled.div`
    max-height: calc(100vh - 136px);
    display: flex;
    overflow-x: hidden;
    overflow-y: scroll;
`;

const Cards = styled.div`
    display: flex;
    flex-wrap: wrap;
    min-height: calc(${56px * 1.5});
    padding: 0 calc(50vw - 600px);
    @media screen and (max-width: 1320px) {
        padding: 0 calc(50vw - 400px);
    }
`;

 const Card = styled.div`
     max-width: 324px;
     height: 56px;
     width: calc(33.33% - 16px);
     @media screen and (max-width: 1320px) {
         width: calc(50% - 16px);
     }
     margin: 8px;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     background-image: url(${props => props.$bgUrl});
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 `;


function ItemDialog() { //this contains the button and overlay with dialog
    return (
        <Wrapper>
            <button onClick={onButtonClick}>click me</button>
            {isDialogOpen && 
                <Overlay onClick={() => {setDialogOpen(false)}}>
                    <Dialog>
                        <input type="text"/>
                        //somedivs
                    </Dialog>
                </Overlay>
            }
        </Wrapper>
    );
}

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    margin-right: 16px;
    margin-left: 16px;
`;

const Overlay = styled.div`
    position: fixed;
    top: 60px;
    bottom: 20px
    left: 0;
    right: 0;
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
`;

const Dialog = styled.div`
    width: 384px;
    max-height: calc(100% - 200px);
    display: flex;
    flex-direction: column;
`;