反应模态仍然显示它来自的主要组件

Question

你好，我是学习 React 的新手，我面临一个问题，当我显示我的弹出式模态组件时，我仍然可以看到并点击我的主用户界面，你能帮我解决这个问题吗？

     import React, { useState } from 'react';
    import styled from 'styled-components'
    import { makeStyles } from '@material-ui/core/styles';
    import AppBar from '@material-ui/core/AppBar';
    import Toolbar from '@material-ui/core/Toolbar';
    import Typography from '@material-ui/core/Typography';
    import Button from '@material-ui/core/Button';
    import IconButton from '@material-ui/core/IconButton';
    import { postinfo } from '../services/node';
    import { useHistory } from "react-router-dom";
    import MenuIcon from '@material-ui/icons/Menu';
    import Msgbox from './msgbox';
    const Container = styled.div`
         background: white;
         
         
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         
         margin-top: 5rem;
         transition: all 0.3s ease-in-out;
         
        
         h4{
            font-size:22px;
            font-weight: 500;
            color: grey;
            margin-bottom: 10px;
            text-transform: uppercase;
            text-align: center;
        }
        h1{
            font-size:30px;
            font-weight: 1500;
            color: #007f7b;
            margin-bottom: 30px;
            text-transform: uppercase;
            text-align: center;
        }
      
        p{
            font-size:25px;
            font-weight: 100;
            color: black;
            margin-bottom: 10px;
        }
        label{
            text-transform: uppercase;
            font-weight: 400;
            color: grey;
            margin-bottom: 0.5rem;
            text-align: center;
        }
       
    `;
    const InputSection= styled.div`
        width: 100%;
        min-width: 350px;
        max-width: 450px;
        display: flex;
        flex-direction: column;
        padding: 1rem;
    
        label{
            text-transform: uppercase;
            font-weight: 400;
            color: grey;
           
        }
        input{
            border: 3px solid #eee;
            border-radius: 1rem;
            background-color: transparent;
            outline: none;
            padding: 12px 3px 12px 15px;
            font-size: 16px;
            transition: all 0.2s ease;
            z-index: 500;
            &:hover,
            &:focus{
                box-shadow: 0 0 1px 0 rgba(8,11,14,0.06), 
                0 16px 16px -1px rgba(8,11,14,0.1);
            }
    
        }
        
    `;
    const SubmitButton= styled.button`
        background-color: #007f7b;
        color: #fff;
        border: none;
        width: 150px;
        height: 36px;
        font-family: "Oswald", sans-serif;
        font-size: 14px;
        letter-spacing: 0.03rem;
        line-height: 36px;
        border-radius: 2px;
        box-shadow: 0 0 1px 0 rgba(8,11,14,0.06), 
                0 6px 6px -1px rgba(8,11,14,0.1);
               
        &:hover{
            box-shadow: 0 0 1px 0 rgba(8,11,14,0.06), 
            0 16px 16px -1px rgba(8,11,14,0.1);
        }
        margin-top: 2rem;
    `;
    const Error = styled.h1`
        color:red;
        font-size: 20px;
        text-align: center;
        margin-bottom: 1rem;
    `;
    const modal= styled.div`
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    `
const UserUi =function(){
    const [showModal, setShowModal] = useState(false);
const openModal = () => {
        setShowModal(prev => !prev);
      };
  return (
                <div>
                    <Container>
                        
                        <h4>Your Contact Information</h4>
                        <InputSection type="email" name='email' onChange={e => setEmail(e.target.value)}>
                        <Error>{email.error}</Error>
                        <label>Email</label>
                        <input 
                        type="text">
                        </input>
                        </InputSection>
                        <InputSection type="text" name='name' onChange={e => setName(e.target.value)}> 
                        <Error>{name.error}</Error>
                        <label>Name</label>
                        <input 
                        type="text">
                        </input>
                        </InputSection>
                        <InputSection type="text" name='phone' onChange={e => setPhone(e.target.value)}>
                        <Error>{phone.error}</Error>
                        <label>Phone</label>
                        <input 
                        type="text">
                        </input>
                        </InputSection>
                        <InputSection type="text" name='refe' onChange={e => setReference(e.target.value)}>
                        <label>Referring Advisor</label>
                        <input 
                        type="text">
                        </input>
                        </InputSection>
                        
                        <SubmitButton type='submit' onClick={openModal}>Save</SubmitButton>
                        <Msgbox showModal={showModal} setShowModal={setShowModal} />
                    </Container>
                   
                   
                    </div>
                )
       
       
    }


export default UserUi

这是模态组件

import React, { useState as UseState, useEffect as UseEffect ,useRef as UseRef, useCallback as UseCallback} from 'react';
import styled from 'styled-components'
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import { postinfo } from '../services/node';
import { useHistory as Userhistory } from "react-router-dom";
import MenuIcon from '@material-ui/icons/Menu';
import { MdClose } from 'react-icons/md';
import { useSpring as UseSpring, animated as Animated} from 'react-spring';
const Background = styled.div`
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const ModalWrapper = styled.div`
  width: 800px;
  height: 500px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #000;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 10;
  border-radius: 10px;
`;

const ModalImg = styled.img`
  width: 100%;
  height: 100%;
  border-radius: 10px 0 0 10px;
  background: #000;
`;

const ModalContent = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.8;
  color: #141414;
  p {
    margin-bottom: 1rem;
  }
  button {
    padding: 10px 24px;
    background: #141414;
    color: #fff;
    border: none;
  }
`;

const CloseModalButton = styled(MdClose)`
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  padding: 0;
  z-index: 10;
`;

const Container = styled.div`
    display: flex;
    justify-content: center;
    
     h4{
        font-size:45px;
        font-weight: 500;
        color: #007f7b;
        margin-bottom: 10px;
        
        text-align: center;
    }
    h3{
        font-size:20px;
        font-weight: 500;
        color: black;
        margin-bottom: 10px;
        
        text-align: center;
    }
    p{
        font-size:25px;
        font-weight: 100;
        color: black;
        margin-bottom: 10px;
    }
    label{
        text-transform: uppercase;
        font-weight: 400;
        color: grey;
        margin-bottom: 0.5rem;
        text-align: center;
    }
`;

const SubmitButton= styled.button`
    background-color: #007f7b;
    color: #fff;
    border: none;
    width: 150px;
    height: 36px;
    font-family: "Oswald", sans-serif;
    font-size: 14px;
    letter-spacing: 0.03rem;
    line-height: 36px;
    border-radius: 2px;
    box-shadow: 0 0 1px 0 rgba(8,11,14,0.06), 
            0 6px 6px -1px rgba(8,11,14,0.1);
           
    &:hover{
        box-shadow: 0 0 1px 0 rgba(8,11,14,0.06), 
        0 16px 16px -1px rgba(8,11,14,0.1);
    }
    margin-top: 2rem;
`;
const Error = styled.h1`
    color:red;
    font-size: 20px;
    text-align: center;
    margin-bottom: 1rem;
`;


export const msgbox = ({ showModal, setShowModal }) => {
    const [Fist, setFirst] = UseState('');
    const [second, setSecond] = UseState('');
    const [third, setThird] = UseState('');
    const modalRef = UseRef();

    const animation = UseSpring({
      config: {
        duration: 250
      },
      opacity: showModal ? 1 : 0,
      transform: showModal ? `translateY(0%)` : `translateY(-100%)`
    });
  
    const closeModal = e => {
      if (modalRef.current === e.target) {
        setShowModal(false);
      }
    };
  
    const keyPress = UseCallback(
      e => {
        if (e.key === 'Escape' && showModal) {
          setShowModal(false);
          console.log('I pressed');
        }
      },
      [setShowModal, showModal]
    );
  
    UseEffect(
      () => {
        document.addEventListener('keydown', keyPress);
        return () => document.removeEventListener('keydown', keyPress);
      },
      [keyPress]
    );
    History = Userhistory();
    
  
    
        return (
          <>
      {showModal ? (
        <Background onClick={closeModal} ref={modalRef}>
          <Animated.div style={animation}>
            <ModalWrapper showModal={showModal}>
              <ModalImg src={require('../assets/modal.jpg')} alt='camera' />
              <ModalContent>
                <h1>Are you ready?</h1>
                <p>Get exclusive access to our next launch.</p>
                <button>Join Now</button>
              </ModalContent>
              <CloseModalButton
                aria-label='Close modal'
                onClick={() => setShowModal(prev => !prev)}
              />
            </ModalWrapper>
          </Animated.div>
        </Background>
      ) : null}
    </>
        
        )
    }


export default msgbox

提前感谢你们希望你们能帮助我我尝试了很多方法来显示模态，但我仍然没有答案。 我只是想在我的用户组件前面显示模态是我在我的样式组件上做错了什么还是我把模态组件放在了错误的地方。

Answer 1

输入标签的 z-index 属性导致输入出现在模态的顶部。 将它设置为零应该可以解决这个问题。

参考：

w3schools.com。 CSS z-index 属性。 https://www.w3schools.com/cssref/pr_pos_z-index.asp 。 （2020 年 11 月 22 日访问）