如何在鼠标点击坐标处显示Tailwind CSS模态框？

实现步骤 #

• 声明状态变量存储点击坐标与模态框显示状态：

  const [clickPosition, setClickPosition] = useState({ x: 0, y: 0 });
  const [displayModal, setDisplayModal] = useState(false);
  

• 监听页面点击事件，获取鼠标视口坐标：

  const handleClick = (e) => {
    setClickPosition({ x: e.clientX, y: e.clientY });
    setDisplayModal(true);
  };
  
  useEffect(() => {
    window.addEventListener('click', handleClick);
    return () => window.removeEventListener('click', handleClick);
  }, []);
  

• 将坐标动态注入Tailwind类名（注意Tailwind动态值需用方括号包裹）：

  <div 
    className={`${displayModal ? 'block' : 'hidden'} fixed w-screen h-screen top-[${clickPosition.y}px] left-[${clickPosition.x}px] z-20 grid`}
  >
    {/* 模态框内容 */}
  </div>
  

补充提示 #

• 优先用fixed定位替代absolute，避免父元素定位规则干扰模态框的视口定位
• 若要让模态框中心对齐点击位置，可调整坐标值：top-[${clickPosition.y - 模态框高度/2}px] left-[${clickPosition.x - 模态框宽度/2}px]，或配合Tailwind的-translate-x-1/2 -translate-y-1/2类实现居中偏移

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