javascript - 点击后不出现的模态窗口

我是 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> 

  );
}

样式.css :

@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;
}

问候，

最佳答案

可能还有其他问题，但似乎模态没有显示，因为它被 opacity: 0 隐藏了，而且它可能因为 pointer-events 而无法关闭: none 阻止点击按钮。

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

以下示例在简化演示中进行了测试: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; */
}

关于javascript - 点击后不出现的模态窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75067796/

javascript - 点击后不出现的模态窗口

上一篇：javascript - 通过 .htaccess 强制 https，并使用 fetch 生成一个 post http url 异常

下一篇：java - 具有附加功能的装饰器模式