Native Back button won't hide or close $.ui.popup & data-modal.

[sandeshbsuvarna]

Hi, Native Back button won't hide or close $.ui.popup & data-modal (in Android - never tested in IOS). Instead the back button will trigger its functionality to the page which caused the popup or modal.

You can see this issue even in the code given by krisrak (https://github.com/krisrak/html5-kitchensink-cordova-xdk-af/blob/master/index.html#L2263).

[imaffett]

Correct - we do not bind anything to that event. If someone wants to write a plugin for it, that would be great!

But this is not an App Framework issue.

[sandeshbsuvarna]

Hi @imaffett ,

Thanks for the reply. Can you give me some hint or example on writing plugin for binding event so that I can try writing a plugin for this issue?

[imaffett]

Can you let me know how you are building this? Is it a web app or hybrid app (cordova)?

[sandeshbsuvarna]

Its Cordova hybrid app

[imaffett]

Ok, first you can bind the back button event. See http://docs.phonegap.com/en/3.3.0/cordova_events_events.md.html#backbutton

For the popup, you can close it by doing something like the following. It will trigger the close event on any popup on the screen.

$('. afPopup').trigger('close');

As for closing the data-model, you can just just dismiss the modal window every time. If there isn't a modal window, the function will just kick out (I need to push a fix up for this)

$.ui.hideModal();

[zwlcoding]

@sandeshbsuvarna I define a global variable , and slightly modified appframework source, if you open a pop-up or modal then change the value of modal_status .

document.addEventListener("deviceready", backbtns, false);

function backbtns() {
    document.addEventListener('backbutton', onBackDown, false);
}

var out_app_status = false;

function onBackDown() {

    if (window.location.hash == "#nh_info") {

        if( modal_status == true ){
            $.ui.hideModal("#nh_booking");
        }else{
            navigator.app.backHistory();
        }

    }else{
        navigator.app.backHistory();
    }
}