Popup Button use React

 React Popup:

Here's a simple example of a popup component using React with class component style and CSS

Example Code:

// Popup.js file

import React from 'react';

import './Popup.css';

class Popup extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      showPopup: false,

      showDeletePoup:false

    };

  }

  togglePopup = () => {

    this.setState({

      showPopup: !this.state.showPopup

    });

  };

handleEventDelete =()=>{

  this.setState({

 showDeletePoup: !this.state.showDeletePoup,

 showPopup:false

  });

}

 render() {

    return (

      <div>

        <button onClick={this.togglePopup} className="SubmitButton">Open Popup</button>

 {this.state.showPopup && (

          <div className="popup">

            <div className="popup-inner">

              <h2>Are you sure to Delete?</h2>

      <div className="ButtonContainer">

              <button onClick={this.togglePopup} className="Close">Close</button>

              <button onClick={this.handleEventDelete} className="Yes">Yes</button>

              </div>

               </div>

          </div>

        )}

{this.state.showDeletePoup&&(

        <div className="popup">

          <div className="popup-inner">

          <p>Data Successfull Deleted</p>

    <button onClick={this.handleEventDelete} className="ok">Ok</button>

          </div>

        </div>

      )}

 </div>

    );

  }

}

export default Popup;

//Popup.css

/* Popup.css */

.popup {

   position: fixed;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

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

   display: flex;

   justify-content: center;

   align-items: center;

 }

 .popup-inner {

   background: white;

   padding: 20px;

   border-radius: 5px;

   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

 }

.SubmitButton{

   padding: 20px 30px;

   margin:300px;

   margin-left: 560px;

   border-radius: 26px;

   border: none;

   background-color: red;

   font-weight: bold;

   font-size: 13px;

   color: white;

   cursor: pointer;

}

   .SubmitButton:hover{

      background-color: aliceblue;

      color: black;

   } 

.ButtonContainer{

   display: flex;

   flex-direction: row;

 margin-left: 100px;

 margin-top: 30px;

}

.Close{

   padding: 15px 30px;

   margin: 5px;

   background-color: red;

   border: none;

   border-radius: 23px;

   cursor:pointer;

   color: white;

   font-size:15px;

   font-weight: bold;

}

.Yes{

   padding: 15px 40px;

   margin: 5px;

   background-color: rgb(35, 219, 7);

   border: none;

   border-radius: 23px;

   cursor:pointer;

   color: white;

   font-size:15px;

   font-weight: bold;

} p{

   font-weight: bold;

   font-size: 20px;

   color: green;

}  

.ok{

   padding: 15px 30px;

   margin-left: 75px;

   background-color: red;

   border: none;

   border-radius: 23px;

   cursor:pointer;

   color: white;

   font-size:15px;

   font-weight: bold;

  }

//App.js

import Popup from "./Popup";

function App() {

  return (

   <Popup/>

  );

}

export default App;