Ionic 2如何更改模态高度和宽度

Question

我在我的应用程序中有一个页面，它有一个模态页面，我想更改该页面的大小，我尝试使用模型属性来更改它，但它会更改所有其他的人的规模，我想有不同的型号，不同尺寸

$modal-inset-min-width 

Answer 1

风格为你的模式添加到这个您app.scss：

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

Answer 2

如果里面的ModalControllercreate方法看，它是：

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

这里是ModalOptions：

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

所以，只需添加一个类你的语气像：

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

现在你可以通过.my-modal类

Answer 3

我使用了建议的方法来启动一个高度为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+像素（片等）的模态行为。

希望可以帮助别人。