Ionic - Angular - Create botom modal / popup-CodePudding

I want to create a pop up under ionic that appears at the bottom and disappears when you click above it exactly like on the Youtube application when you click on the middle button.

How can i do that ?

This example image also shows well.

CodePudding user response：

This is a possible solution :

// ------------------- TS CODE -----------------------------
constructor(public modalController: ModalController) {}

openBottomPopUp() {
    this.modalController
        .create(
            {
                component: PopUpPageToDisplayPage,
                backdropDismiss: true,
                swipeToClose: true,
                cssClass: 'bottom-pop-up'
            })
        .then(modal => {
            modal.present().then();
        });
}


// ------------------- SCSS CODE -----------------------------
.bottom-modal {
  .modal-wrapper {
    width: 100%;
    height: 35%;
    position: absolute;
    bottom: 0;
    border-radius: 10% 10% 0 0;
  }

  .modal-shadow {
    position: absolute;
    height: 35%;
    bottom: 0;
  }
}

the modal-shadow must also be changed so that the pop up disappears when clicked outside. The height can be defined according to your needs.

PopUpPageToDisplayPage is the page you want to display in the popup.

You can use all parameters of ion-modal (https://ionicframework.com/docs/api/modal)

CodePudding user response：

An Ionic implementation exists for this component through the ActionSheetController :

constructor(private actionSheetController: ActionSheetController) { }

async open() {
  (await this.actionSheetController.create({
    buttons: [
      {text: 'item 1'},
      {text: 'item 2'},
      {text: 'item 3', handler: () => console.log('clicked')},
      {text: 'cancel', role: 'cancel'},
    ]
  })).present();
}