enableBackdropDismiss on modalCtrl doesnt work

Ionic Framework ionic-v3
1

Hi there, I have implemented a modal that takes half of the screen and I would like to enable the backdrop dismiss. If the user clicks outside the modal, it dismiss it. But the options doesnt work. Probably because I change the position of the modal like this :

modal-filters.ion-page.show-page {
top: 40vh;
}

and the options :

let modal = this.modalCtrl.create(FiltersModal,{}, {showBackdrop: true, enableBackdropDismiss: true});

But no effect if I click outside the modal. Why ?

2

Hi @Jibe,

I was dealing with similar issue, this is my solution - An alternative to md-bottom-sheet in ionic 2+

You have .modal-wrapper overlaying the backdrop in your case, thatā€™s why the click is not registered.

In your filters modal constructor set a custom class -

this.renderer.setElementClass(viewCtrl.pageRef().nativeElement, 'filters-modal', true);

and in CSS


ion-modal.filters-modal .modal-wrapper{
    bottom:0;
    width:100%;
    height:300px;
    position:absolute;
}

Hope it helps

2 Likes
3

Hello @mthomka, thanks for your reply. I checked your solution and it worked on my app now. But Iā€™m experimenting some strange behavior. There seems to have a transition applied to the modal (only visible when I build then run on my phone) at the opening, and I loose the ā€œbottom-upā€ opening. Did you encountered the same problem ?

PS : Why did you replace the ā€œ< ion-content >ā€ of the HTML modal by "< div class=ā€œmanager-sheet-contentā€ > "?

Best

4

hi @Jibe - what platform is the phone you tried it on? i tested it only on Android so far, but i have the bottom-up transition when opening the modal. Iā€™ve experienced something similar in the past , if constructor of your Filters component is executing some heavy code , on slower devices this might cause the transition not to show correctly or at all.

As for the HTML - the content i needed in the modal was really simple, i chose a lightweight approach with a div only with a pre-set height

5

Tested on Iphone 5, but works great on iphone 7. This is containing only HTML for now (not ts logic inside the component class).

6

Hey, as renderer is deprecated, i was trying to use renderer2 but for android/ios the bottomsheet is covering complete page.
Could you please help?
Thanks In advance

constructor(public renderer: Renderer2, public viewCtrl: ViewController) {
this.renderer.setAttribute(viewCtrl.pageRef().nativeElement, ā€˜filters-modalā€™ , true)

}

7

Hey, as renderer is deprecated, i was trying to use renderer2 but for android/ios the bottomsheet is covering complete page.

Could someone please help?

Thanks In advance

constructor(public renderer: Renderer2, public viewCtrl: ViewController) {

this.renderer.setAttribute(viewCtrl.pageRef().nativeElement, ā€˜filters-modalā€™ , true)

}

8

For Ios Version You Need To Add (swipeToClose:true)
And For Android You Need To Add ( backdropDismiss:true)

const modal = await this.modalCtrl.create({
component: LetmeknowmodalPage,
backdropDismiss:true,
swipeToClose:true,
cssClass: ā€˜let-me-know-modalā€™,
componentProps: { ā€˜product_idā€™: this.product_id }
})
modal.present();