CODEWITHSUNDEEP
javascriptcssreactjs
Mike Alejandro
Mike Alejandro

Reputation: 483

Closing a modal window in react

I'm doing an app, and i have a modal window, and i want to close the modal window when i click on the black background, and the way i did it works, the problem, is that i have white container in the center of the modal window, and i need to click stuff there, and when i do it, it closes the whole window, even though the onClick event is on the ModalHero that is the container that has the black background.

Just let me show you the code...

import React from "react";
import { ModalHero, ContainSettings } from "./ModalSettingsStyled";

const Modal = ({ setProfile }) => {
  return (
    <ModalHero onClick={() => setProfile(false)}>
      <ContainSettings></ContainSettings>
    </ModalHero>
  );
};

export default Modal;

When i click on ContainSettings it closes the window, but i don't want that to happen.

Let me show you the css ( i'm using styled components )

import styles from "styled-components";

export const ModalHero = styles.section`

width: 100%;
height: 100vh;

background: rgba(0,0,0, .5);

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

display: flex;
align-items: center;
justify-content: center;


`;

export const ContainSettings = styles.div`

width: 45%;
height: 40vh;

border-radius: .5rem;
background: white;

`;

This is how it looks

enter image description here

What can i do so when i click the black background it will close the window, but when i click on the white container it won't

Thanks for your time !

Upvotes: -1

Views: 100

Answers (1)

Jo&#227;o Dantas
Jo&#227;o Dantas

Reputation: 41

You can put an Event.stopPropagation() onClick={(e) => e.stopPropagation()} on your ContainSettings

<ContainSettings onClick={(e) => e.stopPropagation()}>

Here a live example:

https://codesandbox.io/s/so-67143988-jmc0k?file=/src/Modal.js

Upvotes: 1

Related Questions