Modal popup in react js

• Create Components folder under src folder
• Add ReactModalPopup.js file and add below Code

import React from "react";

import "./ReactModalPopup.css";

class ReactModalPopup extends React.Component {

state = { show: false };

showModal = () => {

this.setState({ show: true });

};

hideModal = () => {

this.setState({ show: false });

};

render() {

return (

<main>

<h1>React Modal</h1>

<Modal show={this.state.show} handleClose={this.hideModal}>

<p>Modal</p>

<p>Data</p>

</Modal>

<button type="button" onClick={this.showModal}>

Open

</button>

</main>

);

}

}

export default ReactModalPopup;

const Modal = ({ handleClose, show, children }) => {

const showHideClassName = show ? "modal display-block" : "modal display-none";

return (

<div className={showHideClassName}>

<section className="modal-main">

{children}

<button onClick={handleClose}>Close</button>

</section>

</div>

);

};

• Add ReactModalPopup.css file and add below Code

.modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.6);

}

.modal-main {

position: fixed;

background: white;

width: 80%;

height: auto;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.display-block {

display: block;

}

.display-none {

display: none;

}

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import ReactModalPopup from "./components/ReactModalPopup";

function App() {

return (

<div className="App">

<ReactModalPopup />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: