Create a modal in ionic but present it in my own way

@juliusbangert wrote:

I would like to use Ionic modalController to create a modal from an external page, but rather than calling modal.present() I would like to attach the created modal component to the y value of a pan event.

The affect I’m going for is the user dragging the modal up from a ion-footer drawer handle.

Below is some stripped down code, this is a simplified version and I realise that it is incomplete, but it serves in demonstrating what I want to do for this question.

export class MyPage {

  myModal: any;

  constructor(public elementRef: ElementRef, public modalCtrl: ModalController) { }

  ngAfterViewInit() {

    let hammer = new window['Hammer'](this.elementRef.nativeElement);
    hammer.get('pan').set({ direction: window['Hammer'].DIRECTION_VERTICAL });

    hammer.on('panstart', (event) => {
      this.onPanstart(event);
    });

    hammer.on('pan', (event) => {
      this.onPan(event);
    });
  }

  onPanstart(event) {
    this.myModal = this.modalCtrl.create('MyModalPage');
  };

  onPan(event) {
    // This is where I am stuck...
    // Rather than calling modal present,
    // I want to allow the modal to be draggable.

    this.myModal.y = event.center.y;
  };
}

There is this excellent tutorial by Josh Morony that explores what I’m attempting to do but the crucial difference is that I need to use a modal page for my implementation and a ion-footer component as the drawer handle.

drawer-preview-2.gif480x843 927 KB

I’m not sure how I can use the object returned from ModalController.create() or how I would apply css to position the modal window. All help greatly appreciated.

Posts: 1

Participants: 1

Read full topic