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. Java事务管理之Hibernate

    环境与版本 Hibernate 版本:Hibernate 4.2.2 (下载后的文件名为hibernate-release-4.2.2.Final.zip,解压目录hibernate-release- ...

  2. 以太坊go-ethereum常见问题汇总

    (1)什么是 Ethereum? 以太坊是一个分散的智能合同平台,由Ether的加密货币提供支持. (2) 听说过以太坊,但什么是Geth,Mist,Ethminer,Mix? Geth: 以太坊节点 ...

  3. LeetCode691. Stickers to Spell Word

    We are given N different types of stickers. Each sticker has a lowercase English word on it. You wou ...

  4. python 常用的标准库及第三方库

    标准库Python拥有一个强大的标准库.Python语言的核心只包含数字.字符串.列表.字典.文件等常见类型和函数,而由Python标准库提供了系统管理.网络通信.文本处理.数据库接口.图形系统.XM ...

  5. 题解-python-CodeForces 227B

    用hash解决.我python代码消耗很多内存,好在代码比C++短很多 n = int(raw_input()) mylist = raw_input().split(' ') i = 0 zid = ...

  6. #JS Regex正则表达式的使用

    字符串带的正则表达式相关的方法 1.search() 搜索符合指定正则表达式在目标字符串中的位置 str.search('hello'); //str字符串中查找search字符串,成功返回位置,否则 ...

  7. Asp.Net MVC Razor视图引擎与My97DatePicker插件的结合

    using System; using System.Collections.Generic; using System.Runtime.CompilerServices; using System. ...

  8. 5.5版本以上”No input file specified“问题解决

    .htaccess文件中的 RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 在默认情况下会导致No input file specified. 修改成 Rewri ...

  9. ubuntu16.04(64位)建立交叉编译环境,并配置编译内核

    安装步骤 1.准备工具安装目录 将压缩包gcc-linaro-arm-linux-bnueabihf-4.9-2014.07_linux.tar存放在一个目录下,这个目录就是你等会解压缩的目录,以后这 ...

  10. 1015 Reversible Primes (20)(20 point(s))

    problem A reversible prime in any number system is a prime whose "reverse" in that number ...