fix(k8s): YAML 弹框 Portal 到 body 修复居中偏移
PageTransition 的 transform 会使 fixed 弹框相对页面定位而非视口, YamlViewer 尺寸较大时容易跑出可视区。统一用 ModalOverlay Portal。
This commit is contained in:
1 parent
025e74ff4d
commit
729f25e068
4 files changed
+42
-9
No files matched your search
@@ -0,0 +1,24 @@
|
||||
// ModalOverlay — Portal 到 body,避免父级 transform 导致 fixed 弹框偏移 // Logan.Li
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
interface ModalOverlayProps {
|
||||
onClose: () => void;
|
||||
children: React.ReactNode;
|
||||
/** 遮罩 z-index,默认高于 Sidebar/Header */
|
||||
zIndex?: number;
|
||||
}
|
||||
|
||||
export function ModalOverlay({ onClose, children, zIndex = 100 }: ModalOverlayProps) {
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 overflow-y-auto bg-black/60"
|
||||
style={{ zIndex }}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user