通过单击Modal外部关闭Modal不能正常工作。

Question

到目前为止，我的模式运行良好，并做了它应该是。但是，当我尝试实现一种让模态关闭的方法时，当我单击该模式外部时，我会遇到一些错误。

例如，我试图在顶部div中添加onClick={() => setShowModal(false)，但是打开模式的按钮不再工作，bcs此按钮位于顶部div中，并带有setShowModal(false)函数。

const [showModal, setShowModal] = useState(false);


<div className='flex justify-center md:justify-end md:mt-4 mt-12'>
                <button
                  onClick={() => setShowModal(!showModal)}
                  className='bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 border-red-700 rounded'
                >
                  Delete account button
                </button>
                {showModal && (
                  <>
                    <div className='justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none'>
                      <div className='relative w-auto my-6 mx-auto max-w-3xl'>
                        <div className=' bg-gray-600 rounded-lg shadow-2xl relative flex flex-col w-full bg-white outline-none focus:outline-none'>
                          <div className='flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t'>
                            <h3 className='text-3xl font-semibold text-red-500'>
                              Delete account
                            </h3>
                          </div>
                          <div className='relative p-6 flex-auto'>
                            <p className='my-4 text-white text-lg leading-relaxed'>
                              Are you sure...
                            </p>
                          </div>
                          <div className='flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b'>
                            <button
                              className='text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                              type='button'
                              onClick={() => setShowModal(!showModal)}
                            >
                              Cancel
                            </button>
                            <button
                              className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                              type='button'
                              onClick={() => handleSelfDelete(user._id)}
                            >
                              Confirm
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                   <div
                      className='w-full h-screen opacity-25 fixed inset-0 z-10 bg-black'
                      onClick={() => setShowModal(false)}
                    />
                  </>
                )}
              </div>

Answer 1

<>
                    <div
                      className='backdrop'
                      onClick={(e) => {
                        if (e.target.className === 'backdrop') {
                          setShowModal(false);
                        }
                        console.log(e);
                      }}
                    >
                      <div className='relative w-auto my-6 mx-auto max-w-3xl'>
                        <div className=' rounded-lg shadow-2xl relative flex flex-col w-full bg-white outline-none focus:outline-none'>
                          <div className='flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t bg-gray-600'>
                            <h3 className='text-3xl font-semibold text-red-500'>
                              Account löschen
                            </h3>
                          </div>
                          <div className='relative p-6 flex-auto bg-gray-600'>
                            <p className='my-4 text-white text-lg leading-relaxed'>
                              Bist du dir sicher, dass du deinen Account bei uns
                              löschen möchtest? Solltest du dich dazu
                              entscheiden deinen Account zu löschen, werden wir
                              alle deine accountbezogenen, persönlichen Daten
                              für immer löschen. Es besteht keine Möglichkeit,
                              diesen Schritt rückgängig zu machen.
                            </p>
                          </div>
                          <div className='flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b bg-gray-600'>
                            <button
                              className='text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                              type='button'
                              onClick={() => setShowModal(!showModal)}
                            >
                              Abbrechen
                            </button>
                            <button
                              className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                              type='button'
                              onClick={() => handleSelfDelete(user._id)}
                            >
                              Account löschen
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </>

css

.backdrop{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    z-index:10; 
    background: rgba(0,0,0,0.75);
    display: grid;
    place-content: center;
}

Answer 2

让一个与模态相邻的<div>作为背景，当单击它时，将模态状态设置为false

    const [showModal, setShowModal] = useState(false);


<div className='flex justify-center md:justify-end md:mt-4 mt-12'>
                <button
                  onClick={() => setShowModal(!showModal)}
                  className='bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 border-red-700 rounded'
                >
                  Delete account button
                </button>
                {showModal && (
                  <>
                    <div classname='backdrop' onClick={() => setShowModal(false)}/>
                    <div className='justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none'>
                      <div className='relative w-auto my-6 mx-auto max-w-3xl'>
                        <div className=' bg-gray-600 rounded-lg shadow-2xl relative flex flex-col w-full bg-white outline-none focus:outline-none'>
                          <div className='flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t'>
                            <h3 className='text-3xl font-semibold text-red-500'>
                              Delete account
                            </h3>
                          </div>
                          <div className='relative p-6 flex-auto'>
                            <p className='my-4 text-white text-lg leading-relaxed'>
                              Are you sure...
                            </p>
                          </div>
                          <div className='flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b'>
                            <button
                              className='text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                              type='button'
                              onClick={() => setShowModal(!showModal)}
                            >
                              Cancel
                            </button>
                            <button
                              className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                              type='button'
                              onClick={() => handleSelfDelete(user._id)}
                            >
                              Confirm
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className='opacity-25 fixed inset-0 z-40 bg-black'></div>
                  </>
                )}
              </div>

CSS

.backdrop{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        z-index:10;  <--has to be lower than your modal z-index
        background: rgba(0,0,0,0.75)
    }

Answer 3

如前所述，这应该适用于div的设置，同时移除片段。

show modal && 
<div classname="backdrop" onclick=(()=>setShowModal(false))>
<div classname="modal" onclick=((e)=>{e.stopPropagation()})>
...stuff in modal...
</div> //modal
</div> //backdrop