[SOLVED] Android back button

I want that when the user with an Android device clicked the back button, the previous page will be loaded.

I have done so like this:

document.addEventListener('backbutton', function (e) {
  RootScope.f7.views.main.router.back()
})   

This works and if there is not any page in history it doesn’t do just anything. It’s great.

But the problem begins when there is a popup/modal/panel/dialog/alert etc…
Instead of closing those components, it returns to the previous page.

How to detect if there is any kind of such a component opened, and therefore to prevent the command that loads the previous page?

var f7 = RootScope.f7;
var $ = RootScope.f7.$;
if ($('.modal-in').length && $('.modal-in')[0].f7Modal) {
  $('.modal-in')[0].f7Modal.close();
  return;
}
if ($('.panel-active').length) {
  f7.panel.close();
  return;
}
f7.views.main.router.back();

Awesome thanks working as excepted.