小编Onu*_*ika的帖子

React-modal 隐藏在元素后面

我第一次尝试使用 react-modal。当我点击登录按钮时,react-modal 组件被调用,但似乎隐藏在视频登录页面的封面后面。

在点击登录按钮之前,React devtool 在点击登录按钮之前显示适当的状态

现在单击登录按钮时,react devtool 现在显示 ModalPortal 组件在单击登录按钮时呈现适当的状态

登录Modal.scss

.ReactModalPortal>div {
    opacity: 0;
}

.ReactModalPortal .ReactModal__Overlay {
    align-items: center;
    display: flex;
    justify-content: center;
    transition: opacity 200ms ease-in-out;
}

.ReactModalPortal .ReactModal__Overlay--after-open {
    opacity: 1;
}

.ReactModalPortal .ReactModal__Overlay--before-close {
    opacity: 0;
}

.modal {
    position: relative;
    background: #464b5e;
    color: white;
    max-width: 90rem;
    outline: none;
    padding: 3.2rem;
    text-align: center;
}

.modal__title {
    margin: 0 0 1.6rem 0;
}

.modal__body {
    font-size: 2rem;
    font-weight: 300; …
Run Code Online (Sandbox Code Playgroud)

modal-dialog reactjs

12
推荐指数
2
解决办法
1万
查看次数

标签 统计

modal-dialog ×1

reactjs ×1