I'm new to React js and i'm trying to integrate a modal window in my electron software. I tried the following link example: https://medium.com/tinyso/how-to-create-a-modal-component-in-react-from-basic-to-advanced-a3357a2a716a and it worked at first except that when I clicked on the box, the modal window was displayed underneath the whole page when it should be displayed on top. I had to modify the code but now when I click on the box where I put the onClick() nothing happens anymore. I would like to know where my error comes from ? and how to make the modal window display on top of the other elements of the page ?
Here are the code :
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 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 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 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 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 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>
);
}
style.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;
}
Regards,
CodePudding user response：
There might be other issues, but it seems that the modal is not showing because it was hidden by opacity: 0, and it might not be able to close because of pointer-events: none prevents clicking on button.
Perhaps these properties can be edited to see if it improves.
Below example tested in a simplified demo: stackblitz (omitted the useEffect for simplicity, the modal should show on click of the first cell and closes by the "close" button).
.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;
/*