如何实现点击Chakra Modal遮罩背景不关闭弹窗且可交互背景元素

要实现你需要的效果，只需给Modal组件添加两个关键属性，配合现有配置即可：

• 添加closeOnOverlayClick={false}：禁用点击遮罩层关闭弹窗的行为
• 添加useInert={false}：取消对背景元素的交互限制，让背景内容可以被点击、操作

修改后的完整代码如下：

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

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

      <Modal 
        blockScrollOnMount={false} 
        isOpen={isOpen} 
        onClose={onClose}
        closeOnOverlayClick={false} // 点击遮罩不关闭弹窗
        useInert={false} // 允许背景元素交互
      >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text fontWeight='bold' mb='1rem'>
              You can scroll and interact with 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>
    </>
  )
}

关键属性说明 #

• closeOnOverlayClick={false}：覆盖Chakra Modal默认的点击遮罩关闭逻辑，只有明确绑定onClose的元素（比如顶部关闭按钮、底部Close按钮）才会触发弹窗关闭
• useInert={false}：默认情况下，Chakra会给背景元素添加inert属性使其无法接收用户交互，设置为false后解除该限制，配合已有的blockScrollOnMount={false}就能实现背景内容的滚动和交互

内容的提问来源于stack exchange，提问作者IncognitoUser