html - 单个模态的 ionic 3 模态全屏宽度/高度？

Question

我正在使用 ionic modal，我想将我的模态调整为全屏，不是所有模态，而是只有 1 个模态，但无法实现这一点，因为 ionic 本身正在使用 !important< 设置宽度/高度属性/strong> 属性。我试过像下面这样的东西

 @media only screen and (orientation: landscape)  {
   ion-modal {
    .modal-wrapper {
      position: absolute;
      top: 0 !important;
      left: 0 !important;
      display: block;
      width: 100% !important;
      height: 100% !important;
    } 
  }
}

当我把它放在页面范围内时，它没有显示任何效果，但是当我把它放在页面范围之外时，它会改变应用程序中所有模式的宽度/高度。我已经在网上搜索并尝试了很多解决方案，但没有一个有效(或者可能是我无法正确理解)。在这方面的任何帮助将不胜感激。谢谢

Answer 1

首先，为您的模式添加一个类:

let modal = this.modalCtrl.create("YourModalPage", null, {
    cssClass:"my-modal"
})
modal.present();

其次，现在您有了 my-modal 类。 app.scss 中的样式:

 @media only screen and (orientation: landscape)  {
   .my-modal {
    .modal-wrapper {
      position: absolute;
      top: 0 !important;
      left: 0 !important;
      display: block;
      width: 100% !important;
      height: 100% !important;
    } 
  }
}

请注意:模态元素添加到您的页面之外，因此您不能在页面范围内为其设置样式。