ionic 5全屏打开模态而不改变其他模态

Question

是否可以全屏打开特定模式而不影响其他模式。我可以将样式应用于 global.scss 中的模态包装器，但这适用于应用程序中的所有模态，这不是我想要的。我只需要打开两个或三个模态到全屏，其余的需要保持默认大小。

这在小屏幕上不是问题，因为它默认在小屏幕上全屏，但在更大的屏幕上，它们不是全屏。

这是我的代码示例

https://stackblitz.com/edit/ionic-angular-v5-modal-ehedzz?file=src/app/app.component.ts

谢谢

Answer 1

以防万一其他人遇到同样的问题，只需将其添加到 global.scss 中

 .fullscreen {
      --width:100% !important;
      --height:100% !important;
  }

 const modal = await this.modalController.create({
      component: NewModalPage,
      cssClass: 'fullscreen'
    });

Answer 2

将自定义类的样式放入 global.scss 中。像这样：

.dialog-fullscreen .modal-wrapper {
  width: 100%;
  height: 100%;
}

dialog-fullscreen

在您的代码中是

my-custom-class

Answer 3

您需要做的就是将其放入您的CSS中：

ion-modal {
    --width: 100vw;
    --height: 100vh;
}

研究之后，Ionic 在内部使用了“--width”和“--height”CSS 变量，因此覆盖这些变量就足够了。