enableBackdropDismiss on modalCtrl doesnt work

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 ?

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

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

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

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

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)

}

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)

}