Modal window that does not appear after the click

January 10, 2023

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

  );
}

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,

>Solution :

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;
  /* 👇 Replaced opacity: 0; */
  opacity: 1;
  transition: all 0.3s ease-in-out;
  /* 👇 Remvoed */
  /* pointer-events: none; */
}