Question 249267 in CSS Question posted in
Some basic documentation can be found here.

Css – Why my modal doesn't render on the screen when I click on image?

I wrote a simple implementation on React that include an array of Projects.
Eeach projects has is own properties.
I wrote a modal that everytime someone click on an image it has to render on the screen.
right now the modal doesn’t appears on the screen.
i try to figure out why and what is problem but unfortunately i cant.
here is the implementation and the CSS:


import React, { useState, useEffect } from "react";
import Showarma from "../Assets/Showarma.png";
import SimonGame from "../Assets/simongame.png";
import "../Style/Projects.css";

function Projects() {
    const [overlayOpacity, setOverlayOpacity] = useState(0);
    useEffect(() => {
        const handleScroll = () => {
            const aboutSection = document.getElementById('projects');
            const aboutSectionHeight = aboutSection.offsetHeight;
            const windowHeight = window.innerHeight;
            const scrollPosition = window.scrollY;

            const distanceFromTop = aboutSection.offsetTop - scrollPosition;

            if (distanceFromTop <= windowHeight) {
                const progress = 1 - distanceFromTop / aboutSectionHeight;
                setOverlayOpacity(progress);
            } else {
                setOverlayOpacity(0);
            }
        };

        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

    const [selectedProject, setSelectedProject] = useState(null);

    const projects = [
        { id: 1, title: "ShoeWarma", image: Showarma, description: "Description of Project 1" },
        { id: 2, title: "Simon Game", image: SimonGame, description: "Description of Project 2" },
    ];

    const handleImageClick = (projectId) => {
        setSelectedProject(projectId);
    };

    const closeModal = () => {
        setSelectedProject(null);
    };

    return (
        <section id="projects" className="Projects-section">
            <div className="overlay" style={{ backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` }}></div>
            <div className="project-grid">
                {projects.map(project => (
                    <div key={project.id} className="project-card">
                        <h3>{project.title} </h3>
                        <img src={project.image} alt={project.title} onClick={() => handleImageClick(project.id)} />
                    </div>
                ))}
            </div>
            {selectedProject && (
                <div className="modal" onClick={closeModal}>
                    <div className="modal-content">
                        <h3>{projects[selectedProject - 1].title}</h3>
                        <img src={projects[selectedProject - 1].image} alt={projects[selectedProject - 1].title} />
                        <p>{projects[selectedProject - 1].description}</p>
                    </div>
                </div>
            )}
        </section>
    );
}

export default Projects;

This is the Css:

.project-card img {
    max-width: 55%;
    max-height: 55%;
    width: auto;
    height: auto;
    border: 2px solid #fff;
    border-radius: 15px;
    transition: all 0.5s ease;


}

.project-card img:hover {
    transform: scale(1.1);
    border: 2px solid #fff;
    border-radius: 15px;
}

.project-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.project-card {
    flex: 0 0 calc(33.33% - 20px);
    margin: 10px;
    text-align: center;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
}


.modal-content {

    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

i already console log the handleimgclick and it’s work, everytime i click on img it console the id of the specific project.
i try to console log also the project array as well and everything is ok with it

Tags:

2

Answers


  1. 0

    in my opinion, modal is not rendered conditionally. The modal should only rendered if selectedProject state is not null. You can check this by adding a console.log for selectedProject to the render method.

    Login or Signup to reply.
  2. 0

    It looks like you encapsulated your modal HTML in a conditional statement as an argument instead of as the result of the conditional statement. Something like this might work:

    {
  selectedProject !== null ? (
    <div className="modal" onClick={closeModal}>
      <div className="modal-content">
        <h3>{projects[selectedProject - 1].title}</h3>
        <img src={projects[selectedProject - 1].image} alt={projects[selectedProject - 1].title} />
        <p>{projects[selectedProject - 1].description}</p>
      </div>
    </div>) : (
    <div></div>
  )
}

    This uses the ternary operator "? and :" for conditionally rendering your modal when selectedProject is not null or an empty div when selectedProject is null, which seems to be what you want. React docs have great coverage on this. If you need more control over the conditional rendering or if you want more readable code, the docs also suggest using a function which returns conditional HTML. It is described more in depth in that same link to the React docs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search