Cursor events with position fixed in css - css

Question

so I've made this simple popup with tailwindcss that will show project description.
This is how it looks:
import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
import Button from "../../../components/elements/Button";
import ReactMarkdown from "react-markdown";
import { Repo } from "../../../lib/types/Repos";
interface PageProps {
setIsOpen: Dispatch<SetStateAction<boolean>>;
project: Repo;
}
export default function ProjectDescription({ setIsOpen, project }: PageProps) {
useEffect(() => {
document.body.style.overflow = "hidden";
}, []);
const close = () => {
document.body.style.overflow = "auto";
setIsOpen(false);
};
return (
<div
onClick={close}
className="fixed inset-0 h-full w-full flex z-20 justify-center items-center p-4 cursor-pointer"
style={{ backgroundColor: "rgba(0,0,0,0.3)" }}
>
<div className="bg-gray-50 shadow-md scrollbar z-[9999999] max-w-xl max-h-[600px] w-full h-auto px-8 py-8 overflow-auto rounded-md">
<div className="flex justify-between items-center">
<p className="text-gray-700">
Project built with:{" "}
<strong className="text-indigo-600">{project.language}</strong>
</p>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-gray-900 cursor-pointer"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
onClick={close}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</div>
{project.readme && (
<ReactMarkdown
children={project.readme}
className="prose prose-indigo"
/>
)}
<div className="mt-4">
<Button>Webiste</Button>
<a className="ml-4">Github</a>
</div>
</div>
</div>
);
}
Now the problem is that this container(upper div) has click event, and first div inside him also has same event??? Basically I can click on div inside and close modal. And that should not happen? Could someone please explain what's happening.

Answer 1

If you give onClick event to parent div you call same event by click the child dive. It is because the first thing you click is again will be the parent. Give z-9999 insted of z-[9999999] to the child div. Usually what you want to do when making a modal is set onClick(close) event to button not to entirly div itself. In your case you can set onHide(close) to parent div. With this way you close the modal by clicking outside of the modal.