如何在 mui 中实现点击模态框外部不关闭且允许页面交互的弹窗效果：mui 的 modal 默认禁用外部交互且点击背景会关闭；若需保持模态框常驻、同时允许用户操作页面其他区域（如聊天机器人场景），应移除 `onclose` 并改用 `popper` 组件替代。
在使用 Material UI 构建交互式聊天机器人界面时，常见的需求是：弹出一个悬浮式对话面板（如快捷操作区或消息预览），它需要始终可见、不因点击页面空白处而关闭，且不能阻断用户对下方主界面（如输入框、按钮、滚动内容）的操作。
❌ 为什么直接修改 Modal 的 onClose 不够？
虽然移除 onClose 确实能阻止点击背景关闭（如下所示），但 Modal 的底层行为仍会通过 Backdrop 和 aria-hidden 层级强制禁用模态框外的所有焦点与事件捕获：
聊天快捷面板
⚠️ 此时：
- ✅ 点击外部不会关闭弹窗；
- ❌ 但页面其余区域仍无法点击、聚焦、滚动——因为 Modal 的设计初衷就是「模态阻断」，违背了你的交互目标。
✅ 推荐方案：使用 Popper 替代 Modal
Popper 是 MUI 提供的轻量级浮层组件，专为非模态、可交互、锚点定位场景设计。它不渲染遮罩层，不劫持焦点，完全支持页面自由交互，同时提供灵活的定位（如跟随输入框、固定右下角等）。
示例：构建可交互的聊天侧边面板
import { Popper, Box, Button, Typography, useTheme } from '@mui/material';
function ChatBotPanel() {
const [open, setOpen] = useState(false);
const popperRef = useRef(null);
const theme = useTheme();
// 可选：将 Popper 锚定到某个元素（如浮动按钮）
const anchorRef = useRef(null);
return (
<>
{/* 触发按钮（位于页面任意位置） */}
{/* 非模态浮层面板 */}
{({ TransitionProps }) => (
快速操作
)}
);
} ✅ 优势总结：
- 无交互阻断：页面所有元素（包括表单、滚动容器、其他按钮）均可正常响应；
- 精准定位：支持 placement（如 'bottom-start'）、anchorEl 动态锚定、偏移修正；
- 无障碍友好：无需手动管理 aria-hidden 或焦点陷阱；
- 轻量可控：无 backdrop、无默认动画逻辑，样式与行为完全由你定义。
? 注意事项： 若需键盘关闭（如按 Esc），需手动监听并调用 setOpen(false)； Popper 不自带动画，如需淡入/位移动画，可配合 Fade 或 Grow 组件（见 MUI Transitions 文档）； 在复杂布局中，注意 zIndex 设置，避免被其他组件遮挡（推荐使用 theme.zIndex.modal + 1 或更高值）。
总之，当你的“模态”需求本质是「悬浮提示」而非「任务阻断」时，请果断放弃 Modal，拥抱 Popper——它才是 MUI 生态中真正支持自由交互的浮层解决方案。
