时间戳

首页 > 解决方案 > 模态对话框的Ionic 3边框半径在android中不起作用

html - 模态对话框的Ionic 3边框半径在android中不起作用

问题描述

我试图用圆角制作模态对话框。我对此进行了研究并对我的代码进行了一些更改。代码如下。

信息.scss

 ion-modal.infomation ion-backdrop {
    visibility: visible !important;
    z-index:0;
    overflow: hidden;
    }
   ion-modal.infomation .modal-wrapper{
       top: 10%;
       width:80%;
       height: 50%;
       position:absolute;
       left: 10%;
       border-radius: 25px !important;
       background: transparent !important;
   }
   ion-page.modal {
      background: rgba(0,0,0,0.5);
    }
   page-infomation{
    .content{
        background-size: cover;
        padding-bottom: 15px;
    }
    .logoimage{
        width: 100px;
        height: 100px;
    }
   }

信息.html

<ion-content padding st #content>
    <div style="text-align: center">
      <img src="assets/imgs/gameicons/correct.png" style="width:70px;height: 70px;">
    </div> 
    <div style="text-align: center;margin-top: 20px">
      <p 
      *ngIf="!type"
      style="color: #000000;
                font-size:18px;
                font-family: Tecnico !important;
                line-height: 1.0;
                ">
                {{m_content}}
      </p>
      <img [src]="logoImg" alt="" class="logoimage" *ngIf="type && logoImg != null"/>
      <p *ngIf = "type && logoImg == null">Not Available</p>
    </div>
</ion-content>

它在浏览器和 ios 版本中都能完美运行。但在 android 版本中，它显示正方形不是圆形的。请帮助我如何修复它。

标签： htmlionic-framework

解决方案

因此，您将把类放在页面标签之外，但要小心，因为如果您没有在 TS 文件的 modalCtrl 中定义 cssClass，它可能会影响整个应用程序模式。

导入模态选项如下：

import { ModalController, ModalOptions } from 'ionic-angular';

在显示模态的函数内部：

openModal() {
let data = {any data you would like to pass};
let options: ModalOptions = { cssClass: 'your-class' } 
let modal = this.modalCtrl.create(yourComponent, data, options); 
modal.present();
}

然后在你的 scss 文件中：

ion-page{
/*some styles*/
}

.your-class .modal-wrapper{
border-radius: 25px;
}

推荐阅读