如何在 Ionic2 中使模态变为全屏模式？答案

【问题标题】：How Can I make modal to become full-screen in Ionic2?如何在 Ionic2 中使模态变为全屏模式？
【发布时间】：2016-12-22 23:20:32
【问题描述】：

这是我的模态代码：

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

它在手机上运行良好，但在平板电脑上看起来像这样：我想要的是让它看起来像这样：

【问题讨论】：

标签： angular typescript ionic2

【解决方案1】：

我应用这种风格：

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

【讨论】：

但是它会使应用程序中的所有模态变为全屏，我们可以将某些特定模态全屏并保持其余模态不变。
我发现通过添加这个css，模态与状态栏重叠。有什么建议吗？
@Omar 可以在展示modal的时候使用cssClass选项，然后在css中使用class，比如：ion-modal.fullscreen { ... }
这适用于iphone，但在ipad上它与状态栏重叠
以上 CSS 应该保留在 app.scss 或特定的模态页面中？

【解决方案2】：

你应该关注Modal

模态框是覆盖用户当前页面的内容窗格。通常用于做出选择或编辑项目。

所以如果你想全屏显示。我认为您创建新页面并推送到它

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

【讨论】：

nav.push 的行为与全屏模式的预期行为非常相似。很棒的建议。 +1

【解决方案3】：

在你的 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%;
    } 
}

【讨论】：

这会让它全球化吗？你怎么能只为那个页面制作它。为什么这在“page-mymodal”中不起作用
如果您需要进行全局更改，您可以在 app/app.scss 文件中进行。 ion-modal 是 ionic 2 的一个组件。它不会在 page-mymodal 内部覆盖。所以我们应该把它放在外面，它只影响这个页面。

【解决方案4】：

您可以覆盖文件variables.css 中的相关Ionic Sass 变量：

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

文档（当前版本是 3.9，但我将其与 3.7 一起使用）： http://ionicframework.com/docs/theming/overriding-ionic-variables/

【讨论】：

这是正确的方法。我不确定它是不是最好的，但我们应该看看 CSS，因为在小屏幕上，Modal 是全屏的。因此，必须在 css 变量中进行简单的调整。我也为 iOS 添加了这个：$modal-ios-border-radius: 0;
我发现这与状态栏重叠。知道如何解决这个问题吗？
这似乎适用于 iphone，但在 ipad 上它与状态栏重叠