ant design (antd) Modal 自定义样式,去除白色背景,边框,关闭按钮
想实现功能如下:这个Modal没有头,没有确定什么的。因为Modal组件不能自定义外边框,所以把所有的属性全都删掉之后:Modal title={null}visible={this.state.visible}onCancel={this.handleCancel}footer={null}closable={f
·
想实现功能如下:
这个Modal没有头,没有确定什么的。
因为Modal组件不能自定义外边框,所以把所有的属性全都删掉之后:
<Modal title={null}
visible={this.state.visible}
onCancel={this.handleCancel}
footer={null}
closable={false}
wrapClassName={'web'}//对话框外部的类名,主要是用来修改这个modal的样式的
>
<div className="outer-iframe">
<div className="d-iframe">
<iframe id="previewIframe" src="" frameBorder="0"
className="iframe-style"></iframe>
</div>
</div>
</Modal>
还会剩余一个头部的关闭,所以用到了上面代码块的:wrapClassName=>对话框外层容器的类名
来重写外边框的类,此时less改成:
.web {
.ant-modal-content {
position: relative;
background-color: #00000000 !important;
border: 0;
border-radius: 4px;
background-clip: padding-box;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}
.ant-modal-body {
padding: 0 !important;
font-size: 0 !important;
line-height: 1 !important;
}
}
背景改为透明,没有阴影效果即可,此时已经可以完全定义自己的样式。
2018/1/9更新
上面的 :
background-color: #00000000 !important;
的前两个 0 代表的是 安卓上面的 透明度,无意中看到,可能在前端识别不了,请替换成 rgba(0, 0, 0, 0) ,这边不测试了,亲自己试试。
更多推荐
已为社区贡献1条内容
所有评论(0)