[IONIC3] 모달창을 작게 띄우기

현재 페이지를 떠나지 않고 팝업 형식으로 창을 띄우고 싶은 경우 사용하는 ionic API는 ModalController 입니다.

ModalController는 기본적으로 화면에 꽉 차게 뜹니다.

개발을 하다보면 아래와 같이 작은 크기의 모달을 만들어야 할 때가 있습니다.

작은 modal

위 모달을 호출하는 함수의 내용은 아래와 같습니다.

// ...
 
  showGuide(e: Event) {
    e.preventDefault();
 
   // ...
 
   loadOpt = {
      cssClass: 'mini-modal',
      enableBackdropDismiss: false, // 백드롭을 클릭했을 때 모달이 꺼지지 않도록 
      showBackdrop: true // 백드롭을 나타냄
    };
    
    let profileModal = this.modalCtrl.create('ModalOnlyPage', { title: title, content: content }, this.loadOpt);
    profileModal.onDidDismiss(data => {
      console.log(data);
    });
    profileModal.present({animate: false}); // 모달이 나타날 때 애니메이션을 제거함
  }
 
// ...

 

코드에서 중요한 부분은 cssClass 입니다. mini-modal

 

auto-sumae-modal의 속성은 아래와 같습니다.

.mini-modal {
    padding: 50% 10%  !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

위 속성대로 적용하면, backdrop을 유지한 작은 크기의 모달을 만들 수 있습니다.