如何在 mui 中实现点击模态框外部不关闭且允许页面交互的 modal 行为：mui 的 modal 默认阻止外部交互且点击背景会关闭；若需保持打开状态并允许用户操作页面其他区域（如聊天机器人场景），应移除 `onclose` 并改用 `popper` 等非阻断式组件。
在构建交互式界面（例如嵌入式聊天机器人）时，你可能希望弹出一个悬浮窗口（如对话面板），它始终可见、不遮挡页面其他功能，且点击模态框外部不会关闭——这与 MUI <Modal> 的默认行为相悖。默认情况下，Modal 会渲染半透明 Backdrop 并禁用背景交互，同时 onClose 回调会在点击 backdrop 或按 Esc 键时自动触发关闭逻辑。
✅ 正确做法：禁用自动关闭 + 启用外部交互
最直接的方式是完全移除 onClose 属性：
<Modal open={open}>
<Box sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
bgcolor: 'background.paper',
border: '1px solid #e0e0e0',
borderRadius: 2,
p: 3,
minWidth: 300,
}}>
<Typography variant="h6" gutterBottom>Chat Bot Panel</Typography>
<TextField fullWidth label="Type a message" size="small" margin="dense" />
<Button variant="contained" onClick={handleSend} sx={{ mt: 1 }}>Send</Button>
</Box>
</Modal>⚠️ 注意：仅移除 onClose 并不能恢复外部点击交互。因为 Modal 内部仍会通过 Backdrop（默认启用）捕获全部点击事件，并将背景设为 pointer-events: none —— 实际上你仍无法点击按钮、输入框等外部元素。
✅ 推荐方案：改用 Popper（非模态、可交互、灵活定位）
Popper 是 MUI 提供的轻量级浮动容器，不渲染 backdrop，不锁定背景，天然支持页面自由交互，非常适合聊天机器人、工具提示、快捷操作面板等场景：
import { Popper, Box, Button, TextField, Typography } from '@mui/material';
// 需要一个 anchor 元素（可为隐藏 div 或实际按钮）
const popperRef = useRef<HTMLDivElement>(null);
<Popper
open={open}
anchorEl={popperRef.current}
placement="bottom-end"
modifiers={[
{
name: 'offset',
options: {
offset: [0, 8],
},
},
]}
>
<Box
sx={{
bgcolor: 'background.paper',
border: '1px solid #e0e0e0',
borderRadius: 2,
p: 2,
boxShadow: 3,
minWidth: 320,
}}
>
<Typography variant="subtitle1" gutterBottom>? Ask the bot</Typography>
<TextField
fullWidth
size="small"
placeholder="e.g., What's my balance?"
onKeyDown={(e) => e.key === 'Enter' && handleSend()}
sx={{ mb: 1 }}
/>
<Button variant="outlined" size="small" onClick={handleClose}>
Close panel
</Button>
</Box>
</Popper>
{/* 可选：用于定位的锚点（可隐藏） */}
<div ref={popperRef} style={{ display: 'none' }} />✅ 优势总结：
- ✅ 点击外部任意区域 —— 不关闭、不干扰；
- ✅ 页面所有控件（按钮、输入框、下拉菜单等）均可正常响应；
- ✅ 支持动态锚定（如跟随输入框、悬浮于按钮旁）；
- ✅ 内置防溢出、自动翻转、偏移控制等高级定位能力。
? 小结
- ❌ 不要依赖 onClose={() => {}} 或 BackdropProps.onClick 来“阻止关闭”——逻辑不可靠且无法恢复背景交互；
- ✅ 若需纯视觉悬浮 + 完全交互自由，首选 Popper；
- ✅ 若必须使用 Modal（如需遮罩层或强引导场景），可通过 disableBackdropClick 和 disableEscapeKeyDown 控制关闭行为，但仍无法解除 backdrop 对指针事件的拦截（Backdrop 本身会覆盖全屏并阻止穿透）；
- ? 最佳实践：聊天机器人、快捷工具栏、实时通知面板等场景，请优先选用 Popper 或 Portal + 自定义绝对定位组件。
