Ionic 3：将模态 window 定位到屏幕右下角

Question

我都试过了，还是不行。

只想将模式弹窗window固定到屏幕右下角，就这样。

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

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

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

看到这个：

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

Answer 2

我已经做了一些技巧来处理所有模态大小。

首先将这个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;
        }

}

Answer 3

已修复：

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

Ionic 3：将模态 window 定位到屏幕右下角

Ionic 3: Position modal window to bottom right of the screen

modal-dialog

css-position

ionic-framework

ionic2

ionic3