ant design (antd) Modal 自定义样式,去除白色背景,边框,关闭按钮

想实现功能如下:

样式仅供参考

这个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) ,这边不测试了,亲自己试试。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值