Ionic 3: Расположить модальное окно в правом нижнем углу экрана - PullRequest
Новая
       15

Ionic 3: Расположить модальное окно в правом нижнем углу экрана

0 голосов
/ 14 сентября 2018

Я все перепробовал, не понимаю.

Просто хочу зафиксировать модальное всплывающее окно в правом нижнем углу экрана, вот и все.

Вот как я показываю мой модал: 

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

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Я сделал несколько хитростей, чтобы справиться с модальным размером n all.

Прежде всего поместите этот 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;
        }

}
0 голосов
/ 17 сентября 2018

Исправлено с помощью: 

@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;
    }
  }
}
0 голосов
/ 15 сентября 2018

попробуйте определить свойства в глобальном файле app.scss, а не в scss-файле страницы, которую вы пытаетесь показать в модальном режиме.

Смотрите это:

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

...