CODEWITHSUNDEEP
ionic-frameworkmodal-dialogpopup
user17394495
user17394495

Reputation:

Ionic - Angular - Create botom modal / popup

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.

Upvotes: 1

Views: 828

Answers (2)

Alexis Deprez
Alexis Deprez

Reputation: 575

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

Upvotes: 1

user17394495
user17394495

Reputation:

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)

Upvotes: 1

Related Questions