问题：antdv 在Modal中点击打开Modal，新的Modal显示在了前一个打开的Modal的下方

ToOTOooo

于 2023-12-07 15:03:16 发布

阅读量353

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_44792224/article/details/134855886

版权

解决：

加上:zIndex="1001"

<a-modal
      v-model:open="addUser_open"
      title="添加用户"
      :zIndex="1001">
</a-modal>

下面这是官网的描述，我们可以看到对话框组件默认的层级是1000，所以我们只要设置一个大于1000的层级就可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ToOTOooo

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
问题：antdv 在Modal中点击打开Modal，新的Modal显示在了前一个打开的Modal的下方

【代码】问题：antdv 在Modal中点击打开Modal，新的Modal显示在了前一个打开的Modal的下方。
复制链接

扫一扫

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

daxi玫瑰的博客

06-02

914

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

Ant Design Vue V3 Modal 对话框

m0_65137738的博客

02-07

6382

模态对话框。何时使用# 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用Modal在当前页面正中打开一个浮层，承载相应的操作。另外当需要一个简洁的确认框询问用户时，可以使用Modal.confirm()等语法糖方法。 API# # 参数说明类型默认值版本 afterClose Modal 完全关闭后的回调 function 无 bodyStyle Modal body 样式 object ...

参与评论您还未登录，请先登录后发表或查看评论

antd modal层级混乱

lyn1772671980的博客

12-30

4411

【问题描述】有新增菜单、编辑菜单、图标选择三个modal框，其中，图标选择modal框是在新增菜单和编辑菜单 modal框上点击菜单选择框后弹出的公用的moda，点击几次后，图标 modal层级混乱，具体入下图【问题分析】菜单图标modal只创建一次，多次打开后，层级为第一次创建时的zIndex,导致层级没在最上层【解决方案】给modal加上一个key,每次打开菜单图标modal,都指定新的key=Math.random(),层级重新渲染 ...

Antd-Vue表格中弹出多层Modal 问题解决-小记

m0_54731428的博客

06-12

1410

简单记录下vue前端开发中遇到的一个小问题，不值得在这问题上花费过多时间，谨记

React antd使用踩坑总结1

CD2N_Queen的博客

11-11

494

antd使用踩坑总结

Ant Design Vue Modal对话框设置z-index

qwe122343的博客

06-04

4031

对于对话框的 z-index 尝试过自己写 style 样式但没有生效原来对话框内置了 z-index 的 API 供调用默认值取得是1000 <a-modal :zIndex="1001" >

react+antd 莫名缓存与多个对话框的层级错乱

weixin_41564440的博客

06-15

2239

问题1: 新增和查看修改公用一个modal,点击新增时,已经将state中的一个对象清空,但是新增的页面还是有缓存数据; 处理方法: 在modal前加个判断: 问题2: 在弹出的modal对话框中,点击预览图片按钮,再次弹出modal对话框预览图片,预览图片的对话框层级错乱,显示在了第一个modal详情信息的下面; 处理方法: 在modal前加个判断: 具体代码: import React, { Component } from 'react'; import { Button, Col

解决select2在bootstrap modal中不能正常使用的问题

12-10

最近用bootstrap做前端框架，遇到select2单选框在bootstrap modal中不能正常使用，输入框不能获取焦点智能过滤；如下图：解决方法一：在bootstrap.js的模态框js内加上 $.fn.modal.Constructor.prototype....

一个支持ff的modaldialog的js代码

10-31

在`Dialog._geckoOpenModal`方法中，我们看到使用`window.open`方法打开了一个新的窗口，并将其设置为模态对话框。同时，我们还看到了一些事件处理代码，用于处理对话框的关闭事件。关键技术在这个代码中，我们...

vue-modal-dialogs:在Vue中承诺对话框！

05-10

如果您有任何疑问，问题或新想法，请随时打开问题或PR。安装通过或安装 # Use npm npm install vue-modal-dialogs --save # Use yarn yarn add vue-modal-dialogs 然后导入并安装vue-modal-dialogs作为Vue插件：...

react-native-modal-translucent：在Android上删除Modal的StatusBar背景

02-05

在Android上删除Modal的StatusBar背景之前后用法 npm install react-native-modal-translucent --save # or yarn add react-native-modal-translucent 如果您的RN版本低于0.60，则需要手动链接。 react-native ...

AntDV Modal组件函数方式调用自定义content为a-input并实现数据绑定

qq_45223338的博客

12-03

1792

AntDV Modal组件函数方式调用自定义content为a-input并实现数据绑定

vue3使用ant-design-vue的Modal的小技巧

Yosola的博客

04-26

5463

ant的modal挂载，移动

antdv Modal(对话框)指定挂载节点 demo

352328759的博客

03-25

7886

今日需求 antdv Modal 挂载到指定位置分析 antdv 的 Modal 默认是挂载在 body 上的这就导致组件样式不能作用在 Modal 上, 解决办法就是把 Modal 挂载到组件以内的位置上有问题找文档果然, antdv 早就考虑到这种可能性, 并提供了指定挂载位置的 api getContainer 指定 Modal 挂载的 HTML 节点奈何文档并没有提供 demo 但根据解释的类型和默认值, 可以知道 getContainer 需要传入一个 function, 并 re

Antd 的vue模态框modal去除确认或添加按钮（自定义按钮）

最新发布

林太白

08-25

547

❤ Ant Design Vue 2.28的使用

解决bootstrap弹出多个modal遮罩始终在第一个modal下面问题

luchao1989的博客

03-17

2443

弹出3个modal，第3个modal的遮罩应该盖住第2个modal，同理，第2个modal的遮罩应该盖住第1个modal

Ant Design Vue Modal 模态框位置调整

WCF向光而行的技术分享

07-24

1146

有一个功能已经实现的需求，是点击了一个按钮，弹出了如下模态框：这里看到的就是点击按钮之后用户看到的效果，了保持模态框在用户视野范围内，我钻研如何调整显示的位置。

antdv modal forceRender

05-05

antdv的Modal组件提供了forceRender属性，当它设置为true时，Modal将在每次打开时都重新渲染。这可以在需要Modal中的内容随时更新的情况下使用。例如，如果您的Modal中包含表单，并且您需要在Modal打开时重置它，您可以将forceRender设置为true，以便每次打开Modal时重新渲染表单。下面是一个示例代码： ``` <Modal title="Basic Modal" visible={visible} forceRender={true} onOk={handleOk} onCancel={handleCancel} > <Form name="basic" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]} > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> <Form.Item name="remember" valuePropName="checked"> <Checkbox>Remember me</Checkbox> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> </Modal> ``` 在这个例子中，我们将forceRender设置为true，这将导致Modal在每次打开时重新渲染。这样，我们就可以在Modal中的表单中进行更改，并在每次打开Modal时重置表单。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交