antd 两个modal弹窗，一个基于另一个位置固定

最新推荐文章于 2023-08-07 17:31:11 发布

我的小狗很很可爱

最新推荐文章于 2023-08-07 17:31:11 发布

阅读量1k

点赞数

文章标签： react.js

本文链接：https://blog.csdn.net/chhpearl/article/details/131001565

版权

在React.js使用antd库时，如何创建一个基于另一个Modal的固定位置弹窗。当点击第一个Modal的某功能时，第二个Modal会以特定位置出现并适应不同分辨率。关键代码涉及设置style和getBoundingClientRect方法。示例中提到，虽然position属性也可尝试，但在实际应用中可能效果不理想。

摘要由CSDN通过智能技术生成

首先，我们有一个modal，在里面点击某个功能，弹出另一个弹窗，且第二个弹窗相对于第一个位置固定，同时适配分辨率。

                 <Modal
                    title={false}
                    width={'100%'}
                    visible={customExpand}
                    onOk={() => handleOk2(type, 5)}
                    onCancel={() => handleCancel2(type, 5)}
                    destroyOnClose
                    footer={false}
                    mask={false}
                    className={styles['wmx-select-token__custom']}
                  >
                    <div>
                      <MediaList
                        list={customItem1}
                        onChange={(list) => {
                          getCustomItem1(list, type, '5');
                        }}
                        title="MA"
                        a={type}