离子3：将模态窗口定位到屏幕的右下角

Question

我已经尝试了一切，但没有得到它。

只想将模态弹出窗口固定到屏幕的右下角，就是这样。

这就是我展示模态的方式：

let modal = this._ModalController.create(MyPage, { group: group }, {cssClass: 'custom-modal' });
modal.present(); 

而我正在尝试CSS，但没有运气：

.custom-modal {
  .modal-wrapper {
    position: absolute !important;
    bottom: 0px;
    right: 0px;
  }
}

Answer 1

修复它：

@media only screen and (min-height: 600px) and (min-width: 768px)
{
  .custom-modal {
    .modal-wrapper {
      position: absolute;
      width: 766px !important;
      height: 500px !important;
      top: calc(100% - (500px));
      left: calc(100% - (766px)) !important;
    }
  }
}

Answer 2

尝试在全局app.scss文件中定义属性，而不是在您尝试在模式中显示的页面的scss文件中。

看到这个：

https://forum.ionicframework.com/t/ionic-make-certain-modals-fullscreen/102956

Answer 3

我已经做了一些处理模态大小n的技巧。

首先把这个css放到app.scss中

modal-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  @media not all and (min-height: 600px) and (min-width: 768px) {
    ion-modal ion-backdrop {
      visibility: hidden;
    }
  }

  @media only screen and (min-height: 0px) and (min-width: 0px) {
    .modal-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

然后在你的模态页面scss你可以玩你的模态设计

这就是我的表现。

testpage.html

<ion-content class="main-view" scrollY="true">
  <div class="overlay"></div>

  <div class="modal_content">

    <ion-header>

      <ion-navbar>

        <ion-title>Test</ion-title>
        <ion-buttons end>
          <button ion-button (click)="closeModal()">Close</button>
        </ion-buttons>
      </ion-navbar>

    </ion-header>

  </div>
</ion-content>

这里是testPage.scss的神奇作品

test-modal {

        .main-view{
          background: transparent;
        }
        .overlay {
          position: fixed;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: .5;
          background-color: #333;
        }
        .modal_content {
          position: absolute;
          top: calc(50% - (65%/2));
          left: 0;
          right: 0;
          width: 90%;
          // height: 80%;
          padding: 10px;
          z-index: 100;
          margin: 0 auto;
          padding: 10px;
          color: #333;
          background: #e8e8e8;
          background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
          background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
          background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
          border-radius: 5px;
          box-shadow: 0 2px 3px rgba(51, 51, 51, .35);
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          overflow: hidden;
        }

}