如何在Ionic2中使模態成為全屏？

Question

這是我的模態代碼：

    let modal = Modal.create(DailyReportPage);
    this.nav.present(modal);

它在手機上運行正常，但在平板電腦上它看起來像這樣： 我想要的是讓它看起來像這樣：

Answer 1

我應用這種風格：

ion-modal {
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
}

Answer 2

您可以覆蓋文件variables.css的相關Ionic Sass variables.css ：

$modal-inset-width: 100%;
$modal-inset-height-large: 100%;

文檔（當前版本為3.9，但我使用3.7）： http ： //ionicframework.com/docs/theming/overriding-ionic-variables/

Answer 3

你應該遵循Modal

模態是一個覆蓋用戶當前頁面的內容窗格。 通常用於選擇或編輯項目。

所以，如果你想顯示完整的屏幕。 我認為你創建新頁面並推動它

this.nav.push(SamplePage, {item: item});

Answer 4

在scss文件中應用此樣式

ion-modal {
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    } }

它應該在你的選擇器的一邊。

例如： -

page-mymodal {
    //page CSS Codes
}
ion-modal {
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    } 
}