next.js 如何不关闭脉轮模态时,点击覆盖背景,但仍与背景元素交互

jk9hmnmh  于 2023-03-02  发布在  其他
关注(0)|答案(1)|浏览(111)

是否可以用一个开放的模式与背景元素交互?在我没有点击关闭按钮之前,模式应该一直打开。

export default PhoneNumberInput;
function BasicUsage() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>

      <Modal blockScrollOnMount={false} isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text fontWeight='bold' mb='1rem'>
              You can scroll the content behind the modal
            </Text>
            <Lorem count={2} />
          </ModalBody>

          <ModalFooter>
            <Button colorScheme='blue' mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant='ghost'>Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}
mefy6pfw

mefy6pfw1#

您可以执行以下操作来实现此结果:
1.使用blockScrollOnMount={false}让用户滚动Modal后面的内容。
1.使用css属性pointer-events来防止模态容器捕捉指针事件(例如,单击内容、标记文本)。
1.删除ModalOverlay(或调整为更透明)
mdn: pointer-events
[...]属性设置特定图形元素在什么情况下(如果有)可以成为指针事件的目标。

<Modal
  blockScrollOnMount={false}
>    
  <ModalOverlay pointerEvents="none" />
  <ModalContent
    pointerEvents="all"
    containerProps={{ pointerEvents: "none" }}
  >

相关问题