离子3无法更改模式的大小

Question

我正在尝试将模式尺寸更改为不全屏显示。我遵循了这个link。没用模态仍然是完整大小。这就是我打开模态的方式：

private presentModal() {
 let profileModal = this.modalController.create(AddToCustomListModal, {cssClass: 'my-modal'});
 profileModal.present();
}

我的模式页面：

@IonicPage()
@Component({
  selector: 'page-add-to-custom-list',
  templateUrl: 'add-to-custom-list.html',
})
export class AddToCustomListModal {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

}

我的模态的html，只是离子选择的一般示例：

<ion-content padding>

  <ion-item-group>
    <ion-item>
      <ion-label>Period</ion-label>
      <ion-select>
        <ion-option value="7day">7 days</ion-option>
        <ion-option value="overall" selected="true">overall</ion-option>
      </ion-select>
    </ion-item>
  </ion-item-group>

</ion-content>

还有我的全局app.scss文件：

.my-modal {
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 20% 10%  !important;
}

我还尝试将CS​​S代码放入页面的scss文件中，但没有区别。

Answer 1

尝试一下。

private presentModal() {
 let profileModal = this.modalController.create(AddToCustomListModal, null, {cssClass: 'my-modal'});
 profileModal.present();
}

ModalController.create接受3个参数。

1. 组件
2. 数据
3. 选择

如果您需要设置cssClass，则应作为 opts 发送。