alikia2x/cvsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent scrolling of body when model dialog is shown

Browse Source
This commit is contained in:
alikia2x (寒寒) 2025-05-30 03:24:37 +08:00
parent 58b4e2613c
commit 96903dec2b
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/next/app/signup/SignUpForm.tsx
View File

@ -165,7 +165,7 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
>
Show Dialog
</FilledButton>
<FilledButton type="submit" disabled={loading}>
<FilledButton type="submit" disabled={loading} tabIndex={1}>
{!loading ? <span>注册</span> : <LoadingSpinner />}
</FilledButton>
<Portal>

12
packages/next/components/ui/Dialog.tsx
View File

@ -1,6 +1,17 @@
import { motion, AnimatePresence } from "framer-motion";
import React from "react";
import { TextButton } from "./Buttons/TextButton";
import { useEffect } from "react";
export const useDisableBodyScroll = (open: boolean) => {
useEffect(() => {
if (open) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
}, [open]);
};
interface DialogProps {
show: boolean;
@ -36,6 +47,7 @@ export const DialogButtonGroup: React.FC<DialogButtonGroupProps> = ({ children }
};
export const Dialog: React.FC<DialogProps> = ({ show, children }: DialogProps) => {
useDisableBodyScroll(show);
return (
<AnimatePresence>
{show && (