search

ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
90.42k stars 46.41k forks source link

Tour搭配Modal使用导致无法点击下一步 #48652

Closed luxi18 closed 2 weeks ago

luxi18 commented 2 weeks ago

Reproduction link

Edit on StackBlitz

Steps to reproduce

将Tour与Modal搭配一起使用 代码如下： `<Button type="primary" onClick={() => setOpen(true)}> Begin Tour <Modal title="Basic Modal" open={open} onOk={handleOk} onCancel={handleCancel} okButtonProps={{ disabled: true }} cancelButtonProps={{ disabled: true }}

<div id="tourConment" style={{ width: '100%', height: '100&' }}>

<Tour open={open} onClose={() => setOpen(false)} steps={steps} getPopupContainer={() => document.getElementById('tourConment')} />` 使用Tour属性getPopupContainer后mask图层会遮挡Tour的下一步按钮 注销getPopupContainer={() => document.getElementById('tourConment')}这一行代码后又可以点击下一步按钮

What is expected?

如上，使用了getPopupContainer后，Tour的mask在Modal的弹窗内

What is actually happening?

如上，使用了getPopupContainer后，Tour的mask任然在body上，且Tour因为mask层级zindex问题，导致不能点击下一步

Environment Info
antd 5.16.4
React 18.3.0
System window 10
Browser Chrome 124.0.6367.62
stackblitz[bot] commented 2 weeks ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

luxi18 commented 2 weeks ago

Capture mask图层有问题

wanpan11 commented 2 weeks ago

image 不应该把引导模块，挂载到 modal 里面，这样的话他的层级就变低了。

wanpan11 commented 2 weeks ago

在 modal 的 afterOpenChange 里面控制 Tour 是否显示可以避免动画造成的定位问题

zombieJ commented 2 weeks ago

当年设置 container 时，元素的 zIndex 也会被上层 zIndex 影响。这是浏览器原生逻辑，按照 @wanpan11 提到的不要设置即可哈。