如何在React中让window.confirm确认弹窗在页面居中显示

解决方案 #

• 原生window.confirm是浏览器内置UI组件，它的显示位置、样式都由浏览器内核控制，前端无法通过CSS/JS直接修改，因此无法直接调整原生确认框的位置。
• 推荐用自定义模态框替代原生confirm，完全可以适配现有Redux删除逻辑，同时支持自定义位置、样式，两种常用实现方式如下：
  1. 直接用前端UI组件库自带的确认框组件，这类组件默认都是居中显示，代码改动量极小，示例如下（以Ant Design为例，Element UI等其他组件库逻辑类似）：

  import { Modal } from 'antd'
  
  const deleteData =(productId) =>{
    Modal.confirm({
      content: 'Are You Sure, You want delete?',
      onOk: () => {
        dispatch(allActions.deleteData(productId))
      }
    })
  }
  

  2. 自行实现自定义确认框，先通过状态控制弹窗显示，添加居中样式即可，核心逻辑示例（React技术栈为例）：
     状态定义部分：

  // 控制确认框显隐
  const [delConfirmVisible, setDelConfirmVisible] = useState(false)
  // 存储当前待删除的id
  const [currentDelId, setCurrentDelId] = useState(null)
  

  删除触发函数修改：

  const deleteData =(productId) =>{
    setCurrentDelId(productId)
    setDelConfirmVisible(true)
  }
  

  确认删除回调：

  const handleConfirmDelete = () => {
    dispatch(allActions.deleteData(currentDelId))
    // 关闭弹窗清空状态
    setDelConfirmVisible(false)
    setCurrentDelId(null)
  }
  

  自定义弹窗CSS居中设置：

  .custom-confirm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    /* 其余自定义弹窗样式可自行补充 */
  }
  

• 补充说明：正常情况下现代浏览器的原生window.confirm默认就是居中显示的，如果你遇到默认在顶部的情况，可以先在无痕模式下访问测试，排查是否是浏览器插件、自定义配置导致的异常。

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