ant design Modal遮罩层颜色加深 解决方案
1.原因
页面中存在多个Modal同时渲染及弹出(在table里使用Modal就会出现这种问题)
2.解决方案
不让多个Modal同时渲染就行了,设置Modal的visible属性为this.state.delModalVisible,this.state.delModalVisible的值为[], 如果是在table里可以这么做:
showDelModal(id) {
const delModalVisible = this.state.delModalVisible
delModalVisible[id] = true
this.setState({
delModalVisible
})
}
{ this.state.delModalVisible[record.id] ?
<Modal
visible={this.state.delModalVisible[record.id]}
>
</Modal>
: null
}
这样就达到想让哪个弹窗出来就让哪个弹窗出来的效果了,颜色也不会加深,效率也提高了
ant design Modal遮罩层颜色加深 解决方案的更多相关文章
- modal 遮罩层,滚动穿透 bug
modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...
- ant design Modal关闭时清除数据的解决方案
背景:modal组件关闭时不清除数据,原来输入的数据还存在 解决方案: 1.modal的api:destroyOnClose 2.手动控制modal的销毁 this.state = { destroy ...
- 解决 Ant Design Modal 中的 Select 选项框不能显示的问题
antd 的 select 在 modal 里不能显示候选框 代码示例 <a-modal> <a-select> <!-- options --> </a-s ...
- js中奇怪的问题 同步ajax,modal遮罩层
奇怪问题一 今天有一段js执行的时候出现了问题 $.ajax({ ..., async:false, ... }); $('#myModal').modal('hide'); loadcurrentp ...
- iOS 自定义相机带拍摄区域边框及半透明遮罩层(含源码)
开始时准备封装成ViewController的相机,但是在不改我相机控件源码的情况下,使用者很难自定义UI.于是想到将相机核心功能封装到View里,暴露出功能方法给外面调用,调用者只需将LFCamer ...
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- layer弹出层不居中解决方案,仅显示遮罩,没有弹窗
问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...
- Ant Design项目记录和CSS3的总结和Es6的基本总结
这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.desi ...
- easyui中使用的遮罩层
easyui 的 dialog 是继承自 window的,而 window中有modal这样的属性(见参考资料),就是用于打开模态的窗口的,也就是你说的有遮罩层的窗口.所以不需要额外的代码,仅需在di ...
随机推荐
- React-Native 之 环境配置和简单使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- python网络编程--线程GIL(全局解释器锁)
一:什么是GIL 在CPython,全局解释器锁,或GIL,是一个互斥体防止多个本地线程执行同时修改同一个代码.这把锁是必要的主要是因为当前的内存管理不是线程安全的.(然而,由于GIL存在,其他特性已 ...
- Python_oldboy_自动化运维之路_全栈考试(七)
1. 计算100-300之间所有能被3和7整除的所有数之和 # -*- coding: UTF-8 -*- #blog:http://www.cnblogs.com/linux-chenyang/ c ...
- SQl查询数据库库名,表名、表的列名
查询数据库 select * From master.dbo.sysdatabases where name='数据库名' and status<>512 --读取库中的所有表名 (当 ...
- android发布版本的几个命令
./build_native.sh /opt/software/apache-ant-1.8.2/bin/ant clean #/opt/software/apache-ant-1.8.2/bin/a ...
- Hive(三)Hive元数据信息对应MySQL数据库表
概述 Hive 的元数据信息通常存储在关系型数据库中,常用MySQL数据库作为元数据库管理.上一篇hive的安装也是将元数据信息存放在MySQL数据库中. Hive的元数据信息在MySQL数据中有57 ...
- Spring Boot数据库交互
在上篇文件的基础上进行开发,简单实现一下增.查操作,删除和修改类似,作为一个demo就暂时不做重复工作了,实现原理类似 IDEA创建Spring Boot项目 项目结构 新建MySQL数据库相关信息 ...
- 【LOJ】#2035. 「SDOI2016」征途
题解 有人管它叫带权二分,有人管它叫dp凸优化,有人管它叫wqs二分-- 延伸出来还有zgl分治,xjp¥!%#!@#¥!# 当我没说 我们拆个式子,很容易发现所求的就是 \(m\sum_{i = 1 ...
- python之web框架(3):WSGI之web应用完善
python之web框架(3):WSGI之web应用完善 1.上篇的web框架太low,只能实现回应固定页面.现在将它进行完善.首先将wsgi和web服务器进行分离,并给予它回复静态页面的能力. we ...
- 如何让 C++ 和 C# 一样易用,而且效率更高?
(未完成,待续..) 第一章:C++基本功 1. 养成良好的编码习惯. 2. 堆上的资源随用随还,严格控制生命周期. 第二章:一些调试心得 1. 在VisualStudio环境下,曾出现 Detect ...