Shadcn Dialog右上角关闭按钮（X）无法关闭弹窗问题求助

问题原因分析 #

你遇到的右上角关闭按钮无法点击、无光标反馈的问题，大概率是DialogHeader的z-index层级过高，遮挡了关闭按钮，或者关闭按钮未正确关联Dialog的状态控制。

具体解决方案 #

1. 降低DialogHeader的层级，避免遮挡关闭按钮

你的DialogHeader设置了z-50，会覆盖在右上角关闭按钮之上，导致无法交互。移除或降低这个z-index值：

<DialogHeader className='sticky top-0'> {/* 移除z-50 */}
  <DialogTitle className='text-2xl font-bold text-center'>
    Voice Models Selection
  </DialogTitle>
</DialogHeader>

2. 确保关闭按钮正确使用DialogClose组件

Shadcn Dialog默认不自带右上角关闭按钮，若你是自定义添加的X按钮，必须用DialogClose组件包裹，才能关联弹窗的关闭逻辑：

<DialogContent className='p-3'>
  {/* 在DialogHeader内添加右上角关闭按钮 */}
  <DialogHeader className='sticky top-0 relative'> {/* 添加relative让absolute定位生效 */}
    <DialogTitle className='text-2xl font-bold text-center'>
      Voice Models Selection
    </DialogTitle>
    <DialogClose className='absolute right-4 top-4 cursor-pointer'>
      {/* 替换为你项目中使用的X图标组件，比如Lucide的X */}
      <X size={18} />
    </DialogClose>
  </DialogHeader>
  hi
  <DialogClose>Close</DialogClose>
</DialogContent>

3. 移除冗余的打开弹窗逻辑

DialogTrigger已经自带打开弹窗的功能，不需要额外绑定onClick调用voiceEditModal，可以简化代码：

<DialogTrigger asChild>
  <FiEdit
    size={18}
    className='text-blue-600 cursor-pointer shrink-0'
  />
</DialogTrigger>

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