React: Popup modal

Add backdrop to root for click
app.js

import logo from './logo.svg';

import './App.css';

import Modal from './modal/Modal';

import { useState } from 'react';

function App() {

  const [showPop,setShowPop]=useState(false)

  const subForm=()=>{

    setShowPop(true)

  }

  return (

    <div className="App">

     <button onClick={subForm}>show</button>

    {showPop && <Modal></Modal>}

    </div>

  );

}

export default App;

-----------------------------------------------------------

Modal.js

import React, { Fragment } from "react";

import classes from './Modal.module.css';

const Modal=()=>{

return <Fragment><div className={classes.backdrop}><div className={classes.modal}>

<header className={classes.header}>

    <h2>Error</h2>

</header>

<div className={classes.content}>this is body</div>

<footer className={classes.actions}>

    okay

</footer>

</div></div></Fragment>

}

export default Modal;

----------------------------------------------------------

.backdrop {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    z-index: 10;

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

  }

.modal {

    position:fixed;

    top:30vh;

    left:10%;

    width: 80%;

    overflow: hidden;

    z-index: 100;

      }

     

.header{

background-color: gray;

padding: 1rem;

}

.header h2{

    margin: 0;

    color: white;

    }

.content{

padding: 1rem;

background-color: white;

}

.actions{

padding: 1rem;

display: flex;

justify-content: flex-end;

background-color: gray;

}

@media (min-width: 768px) {// used for adjusting size

    .modal {

      left: calc(50% - 20rem);

      width: 40rem;

    }

  }