Ionic framework Ionic 2如何更改模式高度和宽度

我的应用程序中有一个页面有一个模式页面，我想更改该页面的大小，我尝试使用model属性来更改它，但它会更改所有其他页面的大小，我想使用不同大小的不同模型

$modal-inset-min-width

---

如果您看到

ModalController

的内部

create

方法，它是：

create(component: any, data?: any, opts?: ModalOptions): Modal;

下面是

模块选项

：

export interface ModalOptions {
    showBackdrop?: boolean;
    enableBackdropDismiss?: boolean;
    enterAnimation?: string;
    leaveAnimation?: string;
    cssClass?: string;
}

因此，只需向模式中添加一个类，如下所示：

let modal = this.mModalController.create("YourModalPage","Your data",{
    cssClass: "my-modal"
})

---

现在，您可以通过

为您的模式设置样式。我的模式

类

将其添加到您的

应用程序中。scss

：

.my-modal {
    height: 50%!important;
    width: 50%!important;
} 

---

我使用建议的方法启动了50%高度的模态，但我发现了没有启用背景的问题

//app.scss

.my-modal {
  height: 50%!important;
  transform: translateY(100%);
}

产出：

因此，我最终得出以下结论：

//app.scss

@include media-breakpoint-down(sm) {
.my-modal {
    ion-backdrop {
      visibility: visible !important;
    }
    .modal-wrapper {
      border-radius: 10px 10px 0px 0px;
      overflow: hidden;
      top: 50%;
      left: 0;
      position: absolute;
      width: 100%;
      height: 50%;
    }
  }
}

输出这些视图的：

我使用断点mixin来保持768+px（平板电脑等）中的模态行为

---

希望帮助某人。

将他的代码放入你的app.scss文件中

modal-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

@media not all and (min-height: 600px) and (min-width: 768px) {
  ion-modal ion-backdrop {
    visibility: hidden;
  }
}

@media only screen and (min-height: 0px) and (min-width: 0px) {
  .modal-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

---

模态控制器采用自定义css

let moreInfoModal = this.modalCtrl.create(DesktopMoreInfoPage, {
  titles: title,
  images: image,
  description: description
}, {cssClass: 'custom-class'});
moreInfoModal.present();

然后在app.scss文件中

.custom-class {
//your styling goes here
}

自定义css

ion-modal.my-modal {
  padding: 10vh 10vw;
}

定制ts

this.modalCtrl.create(pageName, {myParam:item}, { cssClass: 'my-modal' });

---

我试着像这样在page.scss中添加类。我的模式{高度：50%！重要；宽度：50%！重要；}但是它不起作用。你像上面那样创建模式吗？类是否已添加到元素中？