单个模态的离子3模态全屏宽度/高度？

Question

我正在使用离子模态，我想将我的模态调整为全屏，而不是所有模态但只有1模态，但无法实现这一点，因为离子本身设置宽度/高度属性！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;
    } 
  }
}

当我把它放在页面的范围内时，它没有显示任何效果，但当我把它放在页面的范围之外时，它会改变app中所有模态的宽度/高度。我已经在网上搜索并尝试了很多解决方案，但没有一个有效（或者我可能无法理解它）。在这方面的任何帮助将受到高度赞赏。感谢

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;
    } 
  }
}

请注意：会在页面外添加模态元素，因此您无法在页面范围内为其设置样式。

Answer 2

添加css我觉得这段代码运行正常。

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