如何确保固定模态框位于顶部并且当用户滚动时模态框的顶部也可见？

Question

这是我的代码。您能帮我创建一个更容易理解的版本吗？

import { LoginProps } from '@/layouts/layout.props';
import {
  Box,
  Button,
  Divider,
  Flex,
  FormControl,
  FormLabel,
  Heading,
  HStack,
  IconButton,
  Input,
  Link,
  Stack,
  Text,
} from '@chakra-ui/react';
import { MdClose } from 'react-icons/md';
import { PasswordField } from './PasswordField';

export const LoginModal = ({ showModal, setShowModal }: LoginProps) => (
  <Flex
    bg={'#00000030'}
    w={'full'}
    h={'full'}
    p={'15px'}
    pos={'fixed'}
    top={0}
    left={0}
    opacity={showModal ? 1 : 0}
    visibility={showModal ? 'visible' : 'hidden'}
    alignItems={'center'}
    transition={'all 0.3s ease-out'}
    justifyContent={'center'}
    overflow={'auto'}
    zIndex={99999}
  >
    {showModal && (
      <Box w={'full'} height={'full'} pos={'absolute'} top={0} left={0} onClick={() => setShowModal(false)} />
    )}
    <Stack
      spacing='8'
      bg={'white'}
      maxW={'380px'}
      w={'full'}
      rounded={'lg'}
      p={{ base: '12px', md: '20px' }}
      pos={'relative'}
      zIndex={100}
    >
      <Stack>
        <Stack textAlign='center'>
          <Flex alignItems={'center'} justifyContent={'space-between'} gap={0}>
            <Heading fontSize={{ base: '20px', sm: '24px' }} color={'black'}>
              Добро пожаловать!
            </Heading>
            <IconButton
              w={'10px'}
              h={'10px'}
              onClick={() => setShowModal(false)}
              color={'black'}
              bg={'none'}
              icon={<MdClose fontSize={'28px'} />}
              _hover={{
                backgroundColor: 'none',
                transform: 'rotate(540deg)',
              }}
              _active={{
                backgroundColor: 'none',
              }}
              transition={'all 0.5s ease-in-out'}
              aria-label={'Toggle Navigation'}
            />
          </Flex>
          <Text color='#8E9297' textAlign={'start'} fontSize={{ base: '11px', sm: '14px' }}>
            Войти в систему чтобы торговать в системе
          </Text>
        </Stack>
      </Stack>
      <Box bg={{ base: 'transparent', sm: 'bg.surface' }} borderRadius={{ base: 'none', sm: 'xl' }}>
        <Stack spacing='12'>
          <Stack color={'#63676C'}>
            <Flex direction={'column'} gap='5'>
              <FormControl w={'full'}>
                <FormLabel htmlFor='login'>Логин</FormLabel>
                <Input
                  id='login'
                  type='text'
                  placeholder='Введите логин'
                  bg={'#F0F3F7'}
                  fontSize={'14px'}
                  fontFamily={'Inter'}
                  variant={'unstyled'}
                  border={'none'}
                  padding='12px'
                  rounded={'8px'}
                />
              </FormControl>
              <PasswordField />
            </Flex>
            <Link display={'inline'} color={'#388ff3'} fontSize={'12px'} fontWeight={400} textDecor={'none'}>
              Забыли пароль?
            </Link>
          </Stack>

          <Stack spacing='2'>
            <Button
              bg={'#388FF3 !important'}
              _hover={{
                background: 'none !important',
                border: '1px #388FF3 solid',
                color: '#388FF3',
              }}
              variant={'solid'}
              color={'white'}
            >
              Войти
            </Button>
            <HStack>
              <Divider />
              <Text whiteSpace='nowrap' color='#8E9297' fontSize={'12px'}>
                Хотите стать продавцом?
              </Text>
              <Divider />
            </HStack>
            <Button
              variant={'outline'}
              borderColor={'#388FF3'}
              color={'#388FF3'}
              _hover={{ bg: '#388FF3', color: 'white' }}
            >
              Подать заявку
            </Button>
          </Stack>
        </Stack>
      </Box>
    </Stack>
  </Flex>
);

我已经添加了一张图片来说明我所指的错误。

我尝试在代码中使用 CSS 属性

overflow: auto

。我期望当元素的内容超出其分配的空间时，这将使滚动条出现在元素上。

Answer 1

尝试：

height: auto

和

overflow: scroll