><div id="app"></div>
*{
  margin:0;
}
html,body,#app{
  width: 100%;
  height: 100%;
}
.page{ 
  text-align:center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding:0px;
  background-color: #D9E4DD;
  position: relative;
}

.modal{
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80%;
  max-width:300px;
  height:50%;
  max-height:200px;
  background-color: #FBF7F0;
  box-shadow: 0 3px 6px 3px rgba(107,107,107,.10);
  color: #555555;
  border-radius: 10px;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

button{
  width: auto;
  height: 40px;
  border-radius: 10px;
  color: #555555;
  background-color: #C4D7D3;
  border: none;
  box-shadow: 0 3px 6px 3px rgba(107,107,107,.10);
  margin: 20px;
}

.modal-content{
  color: #555555;
}

const MODALS = {
     DEFAULT: "default",
     TEST1: "test1",
     TEST2: "test2"
 }

function ModalComponent(){
   const[modalName, setModalName] = React.useState(null);

   const handleClickClose = React.useCallback(() => {
    setModalName(null);
    document.removeEventListener('click', handleClickClose)
    },[])

    React.useEffect(()=>{
        return ()=>{
            document.removeEventListener('click', handleClickClose)
        }
    },[handleClickClose])

    const handleOpenClick = (event) => {
        setModalName(MODALS.DEFAULT);
        document.addEventListener('click',handleClickClose)
        event.stopPropagation()
    }

    const DefaultModal = (
        <div id="modal" className="modal" onClick={(event)=>{event.stopPropagation()}}>
            <div className="modal-inner">
                <div clsssName="modal-content">
                    <p>デフォルトモーダル</p>
                </div>
                <button className="modal-test1-btn" onClick={() => {setModalName("test1");}}>
                    test1
                </button>
                <button className="modal-test2-btn" onClick={() => {setModalName("test2");}}>
                    test2
                </button>
                <button className="modal-close-btn" onClick={()=>{handleClickClose()}}>
                    閉じる
                </button>
            </div>
        </div>
    )

    const TestModal1 = (
        <div id="modal" className="modal" onClick={(event)=>{event.stopPropagation()}}>
            <div className="modal-inner">
                <div clsssName="modal-content">
                    <p>テストモーダル1</p>
                </div>
              <button className="modal-default-btn" onClick={() => {setModalName("default");}}>
                test1
              </button>
              <button className="modal-test2-btn" onClick={() => {setModalName("test2");}}>
                test2
              </button>
              <button className="modal-default-button" onClick={()=>{handleOpenClick()}}>
                戻る
              </button>
            </div>
        </div>
    )

    const TestModal2 = (
        <div id="modal" className="modal" onClick={(event)=>{event.stopPropagation()}}>
            <div className="modal-inner">
                <div clsssName="modal-content">
                    <p>テストモーダル2</p>
                </div>
                <button className="modal-test1-btn" onClick={() => {setModalName("test1");}}>
                    test1
                </button>
                <button className="modal-test2-btn" onClick={() => {setModalName("test2");}}>
                    test2
                </button>
                <button className="modal-default-button" onClick={()=>{handleOpenClick()}}>
                    戻る
                </button>
            </div>
        </div>
    )


   return (
     <div className="page">
       <button className="modal-open-btn" onClick={(event)=>{handleOpenClick(event)}}>
           Modal Opne!
       </button>

       {modalName === MODALS.TEST1 && TestModal1}
       {modalName === MODALS.TEST2 && TestModal2}
       {modalName === MODALS.DEFAULT && DefaultModal}

     </div>
   );
 }

// export default ModalComponent;
ReactDOM.render(<ModalComponent />, document.querySelector('#app'))
View Compiled

External CSS

  1. https://codepen.io/katatumuri-maimai/pen/YzZgVyv

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js