React Portal模态框内部组件无法交互问题求助

你的问题核心是模态框内容层被背景遮罩层覆盖，导致按钮、输入框等组件无法接收交互事件。

问题原因 #

你在模态框中设置了两个fixed定位的元素：

• 背景遮罩层：显式设置了z-40的层级
• 内容容器：未设置z-index

由于fixed元素在未指定z-index时，默认层级低于显式设置了更高z-index的元素，背景遮罩层会直接覆盖在内容容器之上，拦截所有点击、输入等交互事件，导致内部组件无法响应。

解决方案 #

给模态框的内容容器添加比遮罩层更高的z-index（比如z-50），确保内容层处于遮罩层上方：

修改ConfirmationModal组件里的内容容器代码：

<div className='fixed z-50 rounded flex flex-col box-border min-w-fit overflow-hidden p-5 bg-zinc-800 inset-y-32 inset-x-32'>
    <button className='py-2 px-8 self-end font-bold hover:bg-violet-600 border rounded' 
    onClick={() => console.log('Pressed')}>
        Close
    </button>
    <div className='box-border h-5/6'>{children}</div>
</div>

额外验证点（可选） #

1. 确认ReactPortal生成的容器元素没有被页面其他元素意外覆盖
2. 检查全局样式中是否存在pointer-events: none等属性影响模态框组件交互

内容的提问来源于stack exchange，提问作者Esore