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遮罩层颜色加深 解决方案的更多相关文章

  1. modal 遮罩层,滚动穿透 bug

    modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...

  2. ant design Modal关闭时清除数据的解决方案

    背景:modal组件关闭时不清除数据,原来输入的数据还存在 解决方案: 1.modal的api:destroyOnClose 2.手动控制modal的销毁 this.state = { destroy ...

  3. 解决 Ant Design Modal 中的 Select 选项框不能显示的问题

    antd 的 select 在 modal 里不能显示候选框 代码示例 <a-modal> <a-select> <!-- options --> </a-s ...

  4. js中奇怪的问题 同步ajax,modal遮罩层

    奇怪问题一 今天有一段js执行的时候出现了问题 $.ajax({ ..., async:false, ... }); $('#myModal').modal('hide'); loadcurrentp ...

  5. iOS 自定义相机带拍摄区域边框及半透明遮罩层(含源码)

    开始时准备封装成ViewController的相机,但是在不改我相机控件源码的情况下,使用者很难自定义UI.于是想到将相机核心功能封装到View里,暴露出功能方法给外面调用,调用者只需将LFCamer ...

  6. modal 弹框遮罩层,滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  7. layer弹出层不居中解决方案,仅显示遮罩,没有弹窗

    问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...

  8. Ant Design项目记录和CSS3的总结和Es6的基本总结

    这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.desi ...

  9. easyui中使用的遮罩层

    easyui 的 dialog 是继承自 window的,而 window中有modal这样的属性(见参考资料),就是用于打开模态的窗口的,也就是你说的有遮罩层的窗口.所以不需要额外的代码,仅需在di ...

随机推荐

  1. SLF4J multiple

    "C:\Program Files\Java\jdk1.8.0_65\bin\java" -Didea.launcher.port=7537 "-Didea.launch ...

  2. shell中的特殊符号总结

    在shell中常用的特殊符号罗列如下: # ;   ;; . , / \\ 'string'| !   $   ${}   $? $$   $* \"string\"* **   ...

  3. python3 安装

    Centos7 安装python3 #安装sqlite-devel yum -y install sqlite-devel #安装依赖 yum -y install make zlib zlib-de ...

  4. javaweb笔记一

    内连接(自然连接): 只有两个表相匹配的行才能在结果集中出现 外连接: 包括 (1)左外连接(左边的表不加限制) (2)右外连接(右边的表不加限制) (3)全外连接(左右两表都不加限制 一个空的构造器 ...

  5. Ubuntu CEPH快速安装

    一.CEPH简介 不管你是想为云平台提供Ceph 对象存储和/或 Ceph 块设备,还是想部署一个 Ceph 文件系统或者把 Ceph 作为他用,所有 Ceph 存储集群的部署都始于部署一个个 Cep ...

  6. mysqlsla 安装

    tar -zxvf mysqlsla-2.03.tar.gz cd mysqlsla-2.03 perl Makefile.PLmake && make install BEGIN f ...

  7. Gitlab Issue Tracker and Wiki(二)

    一. 引用问题 1. 登陆 Gitlab服务器 2. 进入到super-git项目 3. 创建一个问题 4. 查看创建问题的号码,可以在下图找到. 5. 对代码进行提交去关闭这个问题,首先把项目在本机 ...

  8. TCP 建立连接为什么要握 3 次手?

    上次已经说过,没有协议,不成方圆,计算机之间的通信更是依赖于协议.今天就重点分析一下 TCP 协议. 传输控制协议 TCP 是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 7 ...

  9. String 与不可变对象

    什么是不可变对象 ?不可变对象指的是在创建一个对象之后 ,不能再改变它的状态 ,那么这个对象就是不可变的 .不能改变状态的意思是 ,不能改变对象内的成员变量 ,包括基本数据类型的值不能改变 ,引用类型 ...

  10. 1032 Sharing (25)(25 point(s))

    problem To store English words, one method is to use linked lists and store a word letter by letter. ...