到目前为止，我的模态运行良好，并且达到了预期的效果。 但是，当我尝试实现一种方法，让模式在我单击模式外部时关闭，我遇到了一些错误。
例如我尝试在顶部 div 添加 onClick={() => setShowModal(false) ，但是打开模态的按钮不再起作用，因为这个按钮位于带有 setShowModal(false) 函数的顶部 div 内。
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>
在模态旁边有一个
<div> 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)
}
<>
<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;
}
如上所述，这应该适用于在删除片段时设置 div
show modal &&
<div classname="backdrop" onclick=(()=>setShowModal(false))>
<div classname="modal" onclick=((e)=>{e.stopPropagation()})>
...stuff in modal...
</div> //modal
</div> //backdrop
shouldCloseOnClickOutside false 的大括号对我来说适用于react
<Modal
title={__('my modal', 'xxx')}
shouldCloseOnClickOutside={false}
shouldCloseOnEsc={true}
>
enter code here
</Modal>