如何在 mui 中实现点击模态框外部不关闭且允许页面交互的 modal 行为：mui 的 modal 默认阻止外部交互且点击背景会关闭；若需保持打开状态并允许用户操作页面其他区域（如聊天机器人场景），应移除 `onclose` 并改用 `popper` 等非阻断式组件。
在构建交互式界面（例如嵌入式聊天机器人）时，你可能希望弹出一个悬浮窗口（如对话面板），它始终可见、不遮挡页面其他功能，且点击模态框外部不会关闭——这与 MUI
✅ 正确做法：禁用自动关闭 + 启用外部交互
最直接的方式是完全移除 onClose 属性：
Chat Bot Panel
⚠️ 注意：仅移除 onClose 并不能恢复外部点击交互。因为 Modal 内部仍会通过 Backdrop（默认启用）捕获全部点击事件，并将背景设为 pointer-events: none —— 实际上你仍无法点击按钮、输入框等外部元素。
✅ 推荐方案：改用 Popper（非模态、可交互、灵活定位）
Popper 是 MUI 提供的轻量级浮动容器，不渲染 backdrop，不锁定背景，天然支持页面自由交互，非常适合聊天机器人、工具提示、快捷操作面板等场景：
import { Popper, Box, Button, TextField, Typography } from '@mui/material';
// 需要一个 anchor 元素（可为隐藏 div 或实际按钮）
const popperRef = useRef(null);
? Ask the bot
e.key === 'Enter' && handleSend()}
sx={{ mb: 1 }}
/>
{/* 可选：用于定位的锚点（可隐藏） */}
✅ 优势总结：
- ✅ 点击外部任意区域 —— 不关闭、不干扰；
- ✅ 页面所有控件（按钮、输入框、下拉菜单等）均可正常响应；
- ✅ 支持动态锚定（如跟随输入框、悬浮于按钮旁）；
- ✅ 内置防溢出、自动翻转、偏移控制等高级定位能力。
? 小结
- ❌ 不要依赖 onClose={() => {}} 或 BackdropProps.onClick 来“阻止关闭”——逻辑不可靠且无法恢复背景交互；
- ✅ 若需纯视觉悬浮 + 完全交互自由，首选 Popper；
- ✅ 若必须使用 Modal（如需遮罩层或强引导场景），可通过 disableBackdropClick 和 disableEscapeKeyDown 控制关闭行为，但仍无法解除 backdrop 对指针事件的拦截（Backdrop 本身会覆盖全屏并阻止穿透）；
- ? 最佳实践：聊天机器人、快捷工具栏、实时通知面板等场景，请优先选用 Popper 或 Portal + 自定义绝对定位组件。
