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

Posted 2023-03-06

【中文标题】单个模态的离子3模态全屏宽度/高度？

【英文标题】：ionic 3 modal full screen width/height for a single modal?

【发布时间】：2018-04-20 20:23:31

【问题描述】：

我正在使用 ionic 模态，我想将我的模态调整为全屏，不是所有模态，而是只有 1 个模态，但无法实现这一点，因为 ionic 本身正在使用 !important 属性。我已经尝试过类似以下的事情

 @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.js 中所有模式的宽度/高度。我已经在网上搜索并尝试了许多解决方案，但都没有奏效（或者我可能无法正确理解）。在这方面的任何帮助将不胜感激。谢谢

【参考方案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;
     
  

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

【参考方案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;
      
    
  

【讨论】：

请再次阅读问题。我能够实现 css 以使模态全屏显示，我在问如何将这种样式专门应用于仅一个模态。