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+像素（片等）的模態行爲。

希望可以幫助別人。