我是React js的新手,正在尝试在我的electron软件中集成一个模态窗口。我尝试了以下链接示例:https://medium.com/tinyso/how-to-create-a-modal-component-in-react-from-basic-to-advanced-a3357a2a716a,一开始它能够正常工作,但是当我点击该框时,模态窗口会显示在整个页面下面,而不是应该在上面显示。我不得不修改代码,但现在当我点击放置onClick()的框时不再起作用。我想知道我的错误来自哪里?以及如何使模态窗口显示在页面的其他元素之上?
以下是代码:
Modal.js:
以下是代码:
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;
}
敬礼,
.modal
类上使用z-index: 999
了吗? - Johan.modal
类上尝试使用z-index=999
,但没有任何效果。 - Feyto