如何让Ant Design Popconfirm固定在模态框关闭按钮下方？

我在关闭模态框时触发Ant Design的Popconfirm组件，希望它始终固定在模态框的X按钮下方。尝试用overlayStyle调整位置，虽然Popconfirm打开时修改属性值有效，但屏幕尺寸变化或组件关闭后，它会回到初始位置。我写了根据屏幕宽度调整样式的函数，但问题依旧。相关代码如下：

import { ExclamationCircleFilled } from "@ant-design/icons";
import { Popconfirm } from "antd";
import { useEffect, useState } from "react";


type EditModalCloseType = {
    width: number
    popupOpen: boolean;
    onConfirm: () => void;
    onCancel: () => void;

};


export const EditModalClose = ({width, popupOpen, onConfirm, onCancel }: EditModalCloseType) => {
    useEffect(() => {
        calculateOverlayStyle(width);
    }, [width]);
    const description = "¿Estás seguro de salir sin actualizar? los cambios se perderan"
    
    const calculateOverlayStyle = (width: number) => {
        setOverlayStyle({
            ...(width < 688 && { marginLeft: '20px', marginTop: '-160px' }),
            ...(width < 1300 && { position: 'absolute', top: '50%', left: '50%' }),
            ...(width >= 1300 && { position: 'absolute', top: '50%', left: '50%' })
        });
    }
    const [overlayStyle, setOverlayStyle] = useState({});

    

    return <Popconfirm
        title={description}
        open={popupOpen}
        placement="bottom"
        autoAdjustOverflow={true}
        overlayStyle={overlayStyle}
        icon={<ExclamationCircleFilled style={{ color: 'red' }} />}
        okText="Salir"
        okButtonProps={{ style: { backgroundColor: 'red', color: 'white' } }}
        onConfirm={onConfirm}
        cancelText="Regresar"
        onCancel={onCancel}

    />

}

const PopupCancel = () => {
    setPopupOpen(false);
  };
  const PopupConfirm = () => {
    resetFields();
    setPopupOpen(false);
    setOpenModal(false);

  }

要让Popconfirm固定在模态框关闭按钮下方，核心是让组件定位基于关闭按钮本身，而非硬编码的屏幕尺寸计算。具体实现步骤如下：

• 将Popconfirm直接包裹关闭按钮：利用Popconfirm的触发特性，把模态框的X按钮作为Popconfirm的子元素，这样组件会自动以按钮为基准定位，无需手动计算偏移。
• 关闭自动调整并固定位置：设置placement="bottom"，同时将autoAdjustOverflow设为false，避免组件因视口变化自动移位。
• 移除屏幕宽度依赖的样式计算：这种硬编码方式适配性差，改用组件自身的定位逻辑更稳定。

修改后的代码示例 #

改造后的EditModalClose组件

import { ExclamationCircleFilled } from "@ant-design/icons";
import { Popconfirm } from "antd";

type EditModalCloseType = {
  onConfirm: () => void;
  onCancel: () => void;
};

export const EditModalClose = ({ onConfirm, onCancel }: EditModalCloseType) => {
  const description = "¿Estás seguro de salir sin actualizar? los cambios se perderan";

  return (
    <Popconfirm
      title={description}
      placement="bottom"
      autoAdjustOverflow={false}
      icon={<ExclamationCircleFilled style={{ color: "red" }} />}
      okText="Salir"
      okButtonProps={{ style: { backgroundColor: "red", color: "white" } }}
      onConfirm={onConfirm}
      cancelText="Regresar"
      onCancel={onCancel}
    >
      {/* 这里直接返回模态框的关闭图标，作为Popconfirm的触发源 */}
      <ExclamationCircleFilled />
    </Popconfirm>
  );
};

模态框中使用该组件

import { Modal, Form } from "antd";
import { EditModalClose } from "./EditModalClose";
import { useState } from "react";

const YourModal = () => {
  const [openModal, setOpenModal] = useState(true);
  const [form] = Form.useForm();

  const handleConfirm = () => {
    form.resetFields();
    setOpenModal(false);
  };

  const handleCancel = () => {
    // 取消时Popconfirm会自动关闭，无需额外操作
  };

  return (
    <Modal
      open={openModal}
      title="编辑模态框"
      footer={null}
      closeIcon={<EditModalClose onConfirm={handleConfirm} onCancel={handleCancel} />}
    >
      {/* 模态框内部内容 */}
    </Modal>
  );
};

关键说明 #

1. 触发源绑定：关闭按钮作为Popconfirm的子元素，组件会自动基于按钮位置计算弹窗位置，彻底解决偏移问题。
2. 禁用自动调整：autoAdjustOverflow={false} 确保弹窗不会因视口变化自动移位，始终固定在按钮下方。
3. 简化状态管理：不再需要手动控制popupOpen状态，Popconfirm会自行处理弹窗的显示/隐藏逻辑。

内容的提问来源于stack exchange，提问作者juan pablo velez rojas