Блог

при нажатии кнопки отображается диалоговое окно. Я хочу отобразить это диалоговое окно вне div, содержащего его. этот div диалогового окна находится внутри оверлейного div. этот накладной 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 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 amp;amp; 
                <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;
`;

                         
  

Я не уверен, как решить эту проблему. может ли кто-нибудь помочь мне с этим? Спасибо.

Можете ли вы использовать фиксированную позицию в модальном, чтобы вывести ее в глобальный контекст?

В качестве альтернативы вы можете использовать react portal для привязки элемента react к тегу вне дерева DOM.

https://es.reactjs.org/docs/portals.html