Modal 上的关闭按钮真实消失 iphone

Question

当我在 Chrome 中测试响应时，关闭按钮仍然出现，但它在真实 iphone 中消失了。

当点击图片时，图片库会出现，但在 iphone 中，它只有上一个按钮和下一个按钮，关闭按钮消失了。

这是我的代码：

import React, { useState } from "react";
import {
  Box,
  HStack,
  IconButton,
  Image,
  Modal,
  ModalContent,
  ModalOverlay,
  Spacer,
  Text,
  VStack,
} from "@chakra-ui/react";
import ArrowLeftIcon16x8 from "../../icons/ArrowLeftIcon16x8";
import ArrowRightIcon16x8 from "../../icons/ArrowRightIcon16x8";
import { CloseIcon } from "@chakra-ui/icons";

const ImageGalleryModal = ({
  isOpen,
  onClose,
  currentImage,
  listingImages,
}) => {
  const [showCurrentImage, setShowCurrentImage] = useState(currentImage);
  return (
    <Modal
      blockScrollOnMount={true}
      isOpen={isOpen}
      onClose={onClose}
      isCentered
      size={"full"}
    >
      <ModalOverlay />
      <ModalContent minWidth={"100%"} height={"100vh"} position={"relative"}>
        <Image
          top={"0"}
          width={"full"}
          height={"100vh"}
          alt={"img_rent"}
          src={listingImages[showCurrentImage]?.url}
          objectFit={"cover"}
          position={"absolute"}
          zIndex={100}
        />
        <VStack w={"100vw"} h={"100vh"} alignItems={"flex-end"} spacing={0}>
          <Box
            top={{ base: "16px", lg: "24px" }}
            right={{ base: "16px", lg: "24px" }}
            borderRadius={"8px"}
            position={"absolute"}
            zIndex={1000}
          >
            <IconButton
              onClick={onClose}
              width={"32px"}
              height={"32px"}
              borderRadius={"8px"}
              bgColor={"rgba(255, 255, 255, 0.3)"}
              icon={<CloseIcon />}
              aria-label={"Close Image Gallery"}
            />
          </Box>
          <HStack
            position={"absolute"}
            zIndex={999}
            width={"full"}
            height={"full"}
          >
            <HStack
              paddingLeft={{ base: "16px", lg: "24px" }}
              height={"full"}
              alignItems={"center"}
            >
              <IconButton
                onClick={() =>
                  setShowCurrentImage(
                    showCurrentImage > 0
                      ? showCurrentImage - 1
                      : listingImages?.length - 1
                  )
                }
                width={"32px"}
                height={"32px"}
                borderRadius={"8px"}
                bgColor={"rgba(255, 255, 255, 0.3)"}
                icon={<ArrowLeftIcon16x8 />}
                aria-label={"previous image"}
              />
            </HStack>
            <Spacer />
            <HStack
              paddingBottom={{ base: "12px", lg: "16px" }}
              height={"full"}
              alignItems={"flex-end"}
            >
              <Text
                width={{ base: "56px", lg: "64px" }}
                height={{ base: "24px", lg: "34px" }}
                fontWeight={500}
                fontSize={{ base: "12px", lg: "16px" }}
                color={"black.500"}
                bgColor={"rgba(255, 255, 255, 0.3)"}
                borderRadius={"8px"}
                padding={{ base: "4px 18px", lg: "5px 18px" }}
              >
                {`${listingImages?.length > 0 ? showCurrentImage + 1 : 0}/${
                  listingImages?.length
                }`}
              </Text>
            </HStack>
            <Spacer />
            <HStack
              paddingRight={{ base: "16px", lg: "24px" }}
              height={"full"}
              alignItems={"center"}
            >
              <IconButton
                onClick={() =>
                  setShowCurrentImage(
                    showCurrentImage < listingImages?.length - 1
                      ? showCurrentImage + 1
                      : 0
                  )
                }
                width={"32px"}
                height={"32px"}
                borderRadius={"8px"}
                bgColor={"rgba(255, 255, 255, 0.3)"}
                icon={<ArrowRightIcon16x8 />}
                aria-label={"next image"}
              />
            </HStack>
          </HStack>
        </VStack>
      </ModalContent>
    </Modal>
  );
};

export default ImageGalleryModal;

我试图使关闭按钮的 zIndex 高于其他按钮，但它不起作用。

Answer 1

如果你仔细看，这个按钮是可见的（见右上角图片上的蓝色标记）。只需将一些上边距应用到媒体查询中的关闭按钮即可。或者如果它使用“position: absolute”增加最高值。

(

Modal 上的关闭按钮真实消失 iphone

Close Button on Modal disappear in real iphone

html

css

reactjs

next.js

chakra-ui