# Modal not closed by hardware back button **URL:** \ **Category:** ionic-v3\ **Created:** [October 17, 2016, 9:41am UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197 "2016-10-17T09:41:27Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![gregor\_srdic](https://avatars.discourse-cdn.com/v4/letter/g/57b2e6/32.png) [@gregor\_srdic](https://forum.ionicframework.com/u/gregor_srdic)\ **Post date:** [October 17, 2016, 9:41am UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/1 "2016-10-17T09:41:27Z")
I believe the expected functionality (on android that has the hardware back button) would be the back button to close the modal, but the modal stays open and the navigation in background moves one step back. Had to manually override all modals to implement the functionality. ``` Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Ionic Framework Version: 2.0.0-rc.1 (2016-10-13) Ionic CLI Version: 2.1.1 Ionic App Lib Version: 2.1.1 Ionic App Scripts Version: 0.0.34 OS: Node Version: v4.6.0 ``` ---
**Author:** ![ludovicevrard](https://avatars.discourse-cdn.com/v4/letter/l/bb73d2/32.png) [@ludovicevrard](https://forum.ionicframework.com/u/ludovicevrard)\ **Post date:** [October 17, 2016, 11:49am UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/2 "2016-10-17T11:49:37Z")
Hi, why add global event listened? > **[Ionic Framework](https://ionicframework.com/docs/api/util/Events/)** > > Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards For made what you want? It’s what I use for made this. ---
**Author:** ![jrierab](https://avatars.discourse-cdn.com/v4/letter/j/51bf81/32.png) [@jrierab](https://forum.ionicframework.com/u/jrierab)\ **Post date:** [October 27, 2016, 3:37pm UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/3 "2016-10-27T15:37:08Z")
I’m facing this exact behavior. Android HW back button closes the parent window (even the app) while the modal stays open. Shouldn’t it close the modal? I believe it to be same for Alerts and other “pop-ups”. In any case, @ludovicevrard , I don’t see the relation with the event listener. Are you suggesting to capture the back button event? I am doing so with _registerBackButtonAction_ but the modal does not appear to be in my tab navigation stack. ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [October 27, 2016, 3:54pm UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/4 "2016-10-27T15:54:46Z")
Yep, an issue exist in the Ionic’s GitHub > ---
**Author:** ![jrierab](https://avatars.discourse-cdn.com/v4/letter/j/51bf81/32.png) [@jrierab](https://forum.ionicframework.com/u/jrierab)\ **Post date:** [October 27, 2016, 4:19pm UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/5 "2016-10-27T16:19:57Z")
@reedrichards thanks for pointing this out. The _activePortal_ part of the **laserus** solution here [https://github.com/driftyco/ionic/issues/6982#issuecomment-254740855](https://github.com/driftyco/ionic/issues/6982#issuecomment-254740855) solved my issues. ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [October 27, 2016, 4:48pm UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/6 "2016-10-27T16:48:21Z")
Thx for pointing that, that good be a workaround. In my case I will still wait a while to see if the Ionic team comes with a fix in one of the next release (finger crossed ;)) ---
**Author:** ![gregor\_srdic](https://avatars.discourse-cdn.com/v4/letter/g/57b2e6/32.png) [@gregor\_srdic](https://forum.ionicframework.com/u/gregor_srdic)\ **Post date:** [October 29, 2016, 1:57pm UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/7 "2016-10-29T13:57:19Z")
I have solved this by registering a back button action in the modal constructor: ``` this.unregisterBackButtonAction = platform.registerBackButtonAction(() => { this.dismiss(null); }); ``` and then unregistering it on modal dismissal: ``` dismiss(submit) { if(this.unregisterBackButtonAction) this.unregisterBackButtonAction(); ... } ``` ---
**Author:** ![UrbanCondor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/urbancondor/32/103029_2.png) [@UrbanCondor](https://forum.ionicframework.com/u/UrbanCondor)\ **Post date:** [April 18, 2017, 2:01pm UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/8 "2017-04-18T14:01:28Z")
Is anyone still getting this issue? I’ve only just noticed it on one of my apps today. Basically the hardware back button fails to close/dismiss the modal, and instead navigates BACK for the page behind the modal. ``` Cordova CLI: 6.5.0 Ionic Framework Version: 3.0.1 Ionic CLI Version: 2.2.2 Ionic App Lib Version: 2.2.1 Ionic App Scripts Version: 1.3.0 ios-deploy version: Not installed ios-sim version: 5.0.13 OS: macOS Sierra Node Version: v6.10.2 Xcode version: Xcode 8.2.1 Build version 8C1002 ``` ---
**Author:** ![conceps](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/conceps/32/115624_2.png) [@conceps](https://forum.ionicframework.com/u/conceps)\ **Post date:** [March 29, 2018, 9:06am UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/9 "2018-03-29T09:06:07Z")
Ionic 3 Try This Code it Works perfectly ```auto //Check Hardware Back Button Double Tap to Exit And Close Modal On Hardware Back let lastTimeBackPress = 0; let timePeriodToExit = 2000; this.platform.registerBackButtonAction(() => { let activePortal = this.ionicApp._loadingPortal.getActive() || // Close If Any Loader Active this.ionicApp._modalPortal.getActive() || // Close If Any Modal Active this.ionicApp._overlayPortal.getActive(); // Close If Any Overlay Active if (activePortal) { activePortal.dismiss(); } else if(this.nav.canGoBack()){ this.nav.pop(); }else{ //Double check to exit app if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) { this.platform.exitApp(); //Exit from app } else { this.toast.create("Press back button again to exit"); lastTimeBackPress = new Date().getTime(); } } }); ``` ---
**Author:** ![AviQode](https://avatars.discourse-cdn.com/v4/letter/a/f1d935/32.png) [@AviQode](https://forum.ionicframework.com/u/AviQode)\ **Post date:** [April 17, 2018, 8:54am UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/10 "2018-04-17T08:54:54Z")
Thank you @conceps. But I have small problems When any model opens, on first back key press it backs the Page and on second back press only Model closes. and my second problem is that with same else code I am not getting second press option but app exit. ---
**Author:** ![conceps](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/conceps/32/115624_2.png) [@conceps](https://forum.ionicframework.com/u/conceps)\ **Post date:** [April 18, 2018, 6:15am UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/11 "2018-04-18T06:15:09Z")
I think the Second Problem is you are not properly importing toast ```auto import { ToastController } from 'ionic-angular'; constructor(public toastCtrl: ToastController) { } let toast = this.toastCtrl.create({ message: 'Press back button again to exit', duration: 3000 }); toast.present(); ``` I think the First Problem is modal dismiss check the if else condition properly based on your needs. are you use this code in app.component.ts after platform ready. Lets try it. ---
**Author:** ![saurabhgupta1995](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@saurabhgupta1995](https://forum.ionicframework.com/u/saurabhgupta1995)\ **Post date:** [September 19, 2018, 5:21am UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/12 "2018-09-19T05:21:39Z")
can you please tell me what is this.ionicApp here so as to access \_overlayPortal as it is showing me error as > Property ‘ionicApp’ does not exist ---
**Author:** ![gregorsrdic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gregorsrdic/32/73228_2.png) [@gregorsrdic](https://forum.ionicframework.com/u/gregorsrdic)\ **Post date:** [September 19, 2018, 6:57am UTC](https://forum.ionicframework.com/t/modal-not-closed-by-hardware-back-button/67197/13 "2018-09-19T06:57:29Z")
I would imagine it is ```auto import { App } from 'ionic-angular'; ... constructor( ..., private ionicApp:App ) { ... } ``` but I don’t see `_modalPortal` property on it 😮