Ant Design中Modal多次弹出导致弹框背景加深问题

最新推荐文章于 2024-07-10 10:10:23 发布
最新推荐文章于 2024-07-10 10:10:23 发布
阅读量122 收藏
点赞数 3
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41687078/article/details/138656970
版权

最近在项目中使用Ant Design，在一个页面中需要多个模态对话框，发现同一个页面使用多个Modal的话会导致遮罩层颜色变深。

就是给Modal添加属性maskStyle，然后调好达到设计标准的透明度;

示例：:maskStyle={backgroundColor:'rgba(0,0,0,.4)'}
  欢迎碰到同样问题的小伙伴们一起讨论
                  

hql_
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【React】利用modal、codemirror实现日志查看并且实时展示功能
all_might1的博客
11-18 3929
一、前言 最近，被分配了一个需求要完成展示日志并且做到实时刷新展示。在此记录一下完成时的思路、遇到的困难以及解决方法 以下界面展示： 二、解决思路 1、展示界面：Modal 点击查看会进行日志展示，以弹窗的形式进行展示 2、日志展示：codemirror 毕竟是展示日志，所以使用代码编辑codemirror 3、实时更新数据：定时器 三、实现过程及遇到问题解决 1、在Table中添加查看一列 { title: 'XX日志', ...
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
Ant Design Modal 对话框的弹出样式
weixin_57157114的博客
10-17 1654
如何设置modal对话框的弹出样式
解决message（antd-design组件库）弹窗多次数出现的问题
congxue666的博客
02-19 2033
当我们多次点击按钮的时候，会出现下图这样的情况： 这样看起来，会降低用户的体验。所以，我想要的效果是，点一次出现一次，当我再次点击的时候，会销毁上次的，出现本次的。也就是说点一次，就出现一个提示。 解决问题的核心代码： message.destroy(); message.success("删除成功"); ...
Ant Design，在一个页面中使用多个Modal（模态对话框）时，遮罩层颜色变深的不完美解决方案
热门推荐
码飞_CC的博客
08-01 2万+
  项目中使用Ant Design，有一个页面中需要多个模态对话框，发现同一个页面使用多个Modal的话会导致遮罩层颜色变深。目前本人还未找到解决问题根源的方法，只是投机取巧地使用了一种暂时的解决方案：就是给Modal添加属性maskStyle，然后调好对应的透明度，如：maskStyle={{backgroundColor:'rgba(0,0,0,.45)'}}   欢迎碰到同样问题的小伙伴们...
bootstrap 中使用modal模态框遮罩颜色加深
bug收集
01-07 1166
背景：   使用 bootstrap + jQuery 做一个后台管理系统， 采用load 方法去加载页面。     问题：   部分页面中的模态框，多次点击显示后，模态框颜色加深，具体说明：学生管理中的添加模态框，直接点击没有问题，但是去班级管理中点击添加模态框后，在点添加学生模态框，就会出现这个问题。   代码实现，直接复制的bootstrap中的模态框的示例，取消时，直接使用 hide 方法进行隐藏   代码如下： <!-- Butto
react 使用antd Modal对话框改变遮罩颜色加深
weixin_50736511的博客
06-26 951
原因是因为我们多次调用了对话框 可以用简单粗暴的方法但是只治标不治本如果要单独对某个输入框进行逻辑操作时候就会发生错误 第二种就是把isModalVisible定义为数组，然后每次点击的时候给他一个key然后控制这个key的true和false...
微信小程序使用modal组件弹出对话框功能示例
01-19
本文实例讲述了微信小程序使用modal组件弹出对话框功能。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 ①、index.wxml 提示：{{tip}} <button type=default bindtap=showModal>点击我弹出...
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
08-31
主要介绍了Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
11-23
废话少说，切入正题，Bootstrap弹出框垂直居中的问题，因为我拿到的弹出框样式并非垂直居中，而是top 10%，但页面长了，就显得特别恶心。 解决方案如下所示： 1.在css里，找到 .modal.fade.in { top: 10%; } 这...
BootStrap中的模态框（modal，弹出层）功能示例代码
10-17
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。这篇文章主要介绍了BootStrap中的模态框（modal，弹出层）,需要的朋友可以参考下
modal过多, 导致背景色太深问题
wzp6010625的博客
12-06 1555
初始化时, 直接执行即可 $(document).on('show.bs.modal', '.modal', function(event) { $(this).appendTo($('body')); }).on('shown.bs.modal', '.modal.in', function(event) { setModalsAndBackdropsOrder(); }).o
bootstrap多个模态框嵌套显示，造成的遮罩颜色加深和页面滚动条问题
J三石的博客
12-07 1255
网上找到了csdn 一位大神的解决方案： http://blog.csdn.net/k358971707/article/details/71908862 大神的方案有一点小问题，就是当多个模态框都有滚动条的时候，隐藏前一个模态框后，当前模态框的滚动条不出现了。 我在大神基础上改进了，现在记录，贴上代码 修改代码： //判断当前页面所有的模态框都已经隐藏了之后body移除.m
使用了css modules怎么修改antd组件的默认样式，修改antd的样式
MFWSCQ的博客
10-09 7174
使用了css-loader中的css modules来打包代码，想要直接在css中修改antd中的样式但是类名会被加上hash值，应用不到antd的样式上，另外antd的类名不经css-modules改变（配置）。 我要修改的是antd中的样式，用自己的样式覆盖默认的样式，比如modal中的背景颜色。使用:global来修改： :global{ .ant-modal-...
ant design vue a-modal实现弹窗拖拽功能
weixin_44161385的博客
06-01 3913
vue ant-design中a-modal实现拖拽功能
vue3 antd项目实战——Modal弹窗自定义遮罩 （利用maskStyle属性自定义遮罩样式）
XSL_HR的博客
01-13 4296
在后台管理系统的项目开发中，弹窗组件用到的地方很多。由于自带的默认样式不太符合视觉要求，因此需要利用maskStyle属性来自定义modal弹窗的遮罩样式。
Antd-Vue表格中弹出多层Modal 问题解决-小记
m0_54731428的博客
06-12 1399
简单记录下vue前端开发中遇到的一个小问题，不值得在这问题上花费过多时间，谨记
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
最新发布
yunmoon的博客
07-10 741
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
antdesignpro ModalForm使用setFieldsValue多次导致显示不正确
06-13
Ant Design Pro 的 ModalForm 组件在使用 setFieldsValue 方法时，可能会出现多次调用导致显示不正确的问题。这是因为 setFieldsValue 方法会更新表单的值，并且会触发表单的重新渲染。如果在重新渲染之前还有其他的 setFieldsValue 调用，那么之前的修改可能会被覆盖。 解决这个问题的方法是，在每次调用 setFieldsValue 方法之前，先调用 form.resetFields 方法，将表单重置为初始状态，然后再调用 setFieldsValue 方法更新表单的值。这样可以确保每次修改都是在一个干净的状态下进行的，不会出现显示不正确的问题。另外，也可以通过使用 form.setFields 方法，直接更新表单的值，而不是使用 setFieldsValue 方法，这样可以避免触发表单的重新渲染。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值