点击后未出现的模态窗口

Question

我是React js的新手，正在尝试在我的electron软件中集成一个模态窗口。我尝试了以下链接示例：https://medium.com/tinyso/how-to-create-a-modal-component-in-react-from-basic-to-advanced-a3357a2a716a，一开始它能够正常工作，但是当我点击该框时，模态窗口会显示在整个页面下面，而不是应该在上面显示。我不得不修改代码，但现在当我点击放置onClick()的框时不再起作用。我想知道我的错误来自哪里？以及如何使模态窗口显示在页面的其他元素之上？

以下是代码：

Modal.js：

import React from "react";
import "./Modal.css";

const Modal = props => {
  if(!props.show){
    return null
  }
    return (
      <div className="modal">
        <div className="modal-content">
          <div className="modal-header">
            <h4 className="modal-title">Modal title</h4>
          </div>
          <div className="modal-body">This is modal content</div>
          <div className="modal-footer">
            <button onClick={props.onClose} className="button">
              Close
            </button>
          </div>
        </div>
      </div>
    )
}

export default Modal;

Modal.css :

.modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
  }
  
  .modal-content {
    width: 500px;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    transform: translateY(-200px);
  }

  
  .modal-header,
  .modal-footer {
    padding: 10px;
  }
  
  .modal-title {
    margin: 0;
  }
  
  .modal-body {
    padding: 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

App.js :

import React, { useState, useEffect } from 'react';
import Home from './pages/home';
import Modal from './Modal/Modal'


export default function App() {
  const [data, setData] = useState(null);
  const [show,setShow] = useState(false);

  useEffect(() => {
    const socket = new WebSocket('ws://localhost:8000');

    socket.addEventListener('message', (event) => {
      setData(JSON.parse(event.data));
    });
  }, []);

  return (
            <div className="home">
                <div className="template-1" id="temp1">
                <div className="panel-1">
                    <div className="panel-header">
                    <h1>Panel 1</h1>
                    <i className='bx bx-cog modal-trigger-panel'></i>
                    </div>
                    <div className="panel-body">
                    <div className="sec-5 modal-trigger-data" id="hs-sec-5" onClick={()=>setShow(true)}>
                        {data ? <span class="h1" id="h1-fs-s5">{data[0]}</span> : <p>Loading...</p>}
                        <h2>TWIST</h2>
                        <h3>s5</h3>
                    </div>
                    <div className="sec-4 modal-trigger-data" id="hs-sec-4">
                        {data ? <span class="h1" id="h1-fs-s5">{data[1]}</span> : <p>Loading...</p>}
                        <h2>TWIST</h2>
                        <h3>s4</h3>
                    </div>
                    <div className="sec-3 modal-trigger-data" id="hs-sec-3">
                        {data ? <span class="h1" id="h1-fs-s5">{data[2]}</span> : <p>Loading...</p>}
                        <h2>TWIST</h2>
                        <h3>s3</h3>
                    </div>
                    <div className="sec-2 modal-trigger-data" id="hs-sec-2">
                        {data ? <span class="h1" id="h1-fs-s5">{data[3]}</span> : <p>Loading...</p>}
                        <h2>TWIST</h2>
                        <h3>s2</h3>
                    </div>
                    <div className="sec-1 modal-trigger-data" id="hs-sec-1">
                        {data ? <span class="h1" id="h1-fs-s5">{data[4]}</span> : <p>Loading...</p>}
                        <h2>TWIST</h2>
                        <h3>s1</h3>
                    </div>
                    </div>
                </div>
                </div>
                <Modal onClose={() => setShow(false)} show={show} />
            </div> 

  );
}

：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #1c1a1a;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ===== Transition ===== */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

body{
    height: 100vh;
    background: var(--body-color);
}

/*Paramètres de la page des templates*/
.home{
    position: relative;
    height: 100vh;
    left: 78px;
    width: calc(100% - 78px);
    background: var(--body-color);
    transition: var(--tran-05);
}

/*--------------------- TEMPLATE 1 ---------------------*/
.template-1{
    display: block;
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
}

/* PANNEAU N°1*/

/*Paramètres de la fenêtre modal*/
.panel-1{
    position: absolute;
    width: 10%;
    height: 100%;
    padding: 5px;
}


/*Paramétre titre du panneau*/
.panel-1 .panel-header h1{
    font-size: 1.5vh;
    margin-left: 5px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}

/*Paramétre panel header*/
.panel-1 .panel-header{
    display: flex;
    height: 3%;
    border-radius: 5px 5px 0px 0px;
    align-items: center;
    justify-content: space-between;
    padding: 0.1% 0.1%;
    background-color: rgb(91, 91, 91);
    color: rgb(255, 255, 255);
    box-shadow: 0 0 7px rgba(18,18,18,0.5);
}

/*Paramètres panel body*/
.panel-1 .panel-body{
    height: 97%;
    background-color: #ffffff;
    box-shadow: 0 0 7px rgba(18,18,18,0.5);
}

/*----- Sections -----*/

.panel-body .sec-5{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;

}

.panel-body .sec-5:hover{
    background-color: #707070;
    color: #E4E9F7;
}

.panel-body .h1{
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 9vh;
}

.panel-body h1{
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 4vh;
}

.panel-body h2{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3vh;

}

.panel-body h3{
    position: absolute;
    margin-left: 2%;
    font-size: 1.5vh;
}

.panel-body .sec-4{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;
}

.panel-body .sec-4:hover{
    background-color: #707070;
    color: #E4E9F7;
}

.panel-body .sec-3{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;
}

.panel-body .sec-3:hover{
    background-color: #707070;
    color: #E4E9F7;
}

.panel-body .sec-2{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;
}

.panel-body .sec-2:hover{
    background-color: #707070;
    color: #E4E9F7;
}

.panel-body .sec-1{
    position: relative;
    width: 100%;
    height: 20%;
    cursor: pointer;
    border: 1px solid #000000;
}

.panel-body .sec-1:hover{
    background-color: #707070;
    color: #E4E9F7;
}

敬礼，

- Feyto

---

你尝试在你的.modal类上使用z-index: 999了吗？ - Johan

我在.modal类上尝试使用z-index=999，但没有任何效果。 - Feyto

Answer 1

可能还有其他问题，但看起来模态框没有显示是因为被 opacity: 0 隐藏了，而且可能无法关闭是因为 pointer-events: none 防止点击 button。

也许可以编辑这些属性以查看是否有所改进。

下面的示例在简化的演示中进行了测试：stackblitz（为简单起见省略了 useEffect ，模态应该在单击第一个单元格时显示，并通过 "关闭" 按钮关闭）。

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  /*  Replaced opacity: 0; */
  opacity: 1;
  transition: all 0.3s ease-in-out;
  /*  Remvoed */
  /* pointer-events: none; */
}

- John Li