如何让React项目中模态窗在缩放或窗口调整时位置固定

问题根源 #

react-modal默认通过Portal将模态框挂载到document.body，而非父组件的DOM层级内，因此它的定位默认以视口为基准，而非父组件。同时使用固定像素值定位，在页面缩放或窗口尺寸变化时无法自适应父元素的位置，导致偏移。

修复方案 #

要让模态框相对于父按钮固定位置，需要获取按钮的DOM位置信息，动态计算模态框的定位坐标：

1. 在父组件中获取按钮的实时位置

使用useRef和getBoundingClientRect()获取按钮的位置，并监听窗口变化实时更新：

// ParentComponent.tsx
import { useRef, useState, useEffect } from 'react';

const ParentComponent = () => {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [modalPosition, setModalPosition] = useState({ top: 0, right: 0 });

  const updateModalPosition = () => {
    if (buttonRef.current) {
      const rect = buttonRef.current.getBoundingClientRect();
      // 示例：将模态框定位在按钮右上方并垂直居中
      setModalPosition({
        top: rect.top + window.scrollY,
        right: window.innerWidth - rect.right + window.scrollX,
      });
    }
  };

  useEffect(() => {
    updateModalPosition();
    const handleResize = () => updateModalPosition();
    const handleZoom = () => requestAnimationFrame(updateModalPosition);
    
    window.addEventListener('resize', handleResize);
    window.addEventListener('wheel', handleZoom); // 监听鼠标缩放
    
    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('wheel', handleZoom);
    };
  }, []);

  return (
    <>
      <button ref={buttonRef} onClick={...}>
        <Icon/>
      </button>
      <ModalWindow position={modalPosition}/>
    </>
  )
}

2. 在ModalWindow中动态应用定位

将父组件传递的位置信息应用到模态框的样式中：

// ModalWindow.tsx
interface ModalWindowProps {
  position: { top: number; right: number };
}

const ModalWindow = ({ position }: ModalWindowProps) => {
  return (
    <ReactModal
      ariaHideApp={false}
      isOpen={...}
      onRequestClose={() => {...}}
      style={{
        overlay: {
          backgroundColor: 'transparent',
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },
        content: {
          outline: 'none',
          position: 'absolute',
          top: `${position.top}px`,
          right: `${position.right}px`,
          margin: 0,
          padding: 0,
          transform: 'translate(0, -50%)', // 垂直对齐按钮中心
          height: '50px',
          width: '50px',
        },
      }}
      className={clsxm('focus:outline-none')}
    >
      {/* 模态框内容 */}
    </ReactModal>
  );
};

关键说明 #

• 利用getBoundingClientRect()获取父元素的实时位置，确保模态框定位始终基于父元素当前位置。
• 使用fixed定位的overlay配合absolute定位的content，保证模态框在页面滚动和缩放时都能保持相对父元素的位置。
• 监听resize和鼠标缩放事件，实时更新定位坐标，解决窗口变化或页面缩放导致的偏移问题。

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