Remove overlay on Hardware back button

Hi ,
I am trying to remove model or anything which is coming on any page . Like i clicked on one page and then model is showing and i want to close the model when user click on h/w back button but the problem is that it is not working like that my code is

 this.platform.registerBackButtonAction(() => {
        debugger;
        console.log(this.nav.canGoBack());
        // console.log(this.nav.getActiveNav());
        console.log(this.nav.getActive().name);
        console.log(this.nav.getActive());
        console.log(this.nav.getActive().isOverlay);
        console.log(this.nav.getActive().component);
        if(this.nav.getActive().name=="BookingPopup"){
            console.log("yes");
        }
        console.log(this.nav.getActiveChildNav());

        if(this.nav.canGoBack()){
            this.nav.pop();
        }else{
            if(this.alert) {
                this.alert.dismiss();
                this.alert = null;
            }else{
                this.showAlert();
            }
        }
    });

Here when modal is showing when i am tabbing back button then i am getting previous page name in this.nav.getActive().name . Which i think is not fine because it should show popup name . can anyone resolve my issue ?

did you tried viewCtrl.dismiss();

I can do that but which condition i have to write there ? Like how to check for if condition

this might be helpful