[SOLVED] Temporarily disable hardware back button?

I currently have a multi page (Android) application that allows you to go back a page with the hardware back button. I would like to do 1 of 2 things:

  1. Disable the back button when a ‘sheet-modal’ is displayed, re-enable it when ‘sheet-modal’ is closed.


  1. If a ‘sheet-modal’ is displayed, instead of the hardware back button going back to the current page (which still leaves the sheet modal displayed), have it only close the sheet modal and not navigate back a page unless the user hits back again after sheet modals is closed.

Can either of these be done?

both can be done,
i made a jsfiddle with option 2

i had to simulate the fisical back buton, triggering the event on my own.

but in the device, the event to listen is:

document.addEventListener("backbutton", callback, false);

function callback (e) {
 // your magic here
  if (1==2) return false; //do nothing on condition
  var view=app.views.current;
  var comp=['actions','popover','picker','sheet'].filter(function(itm){
      return itm;
  if (!comp.length && view.history.length) {

Where would I put this code? I can not seem to get it to work. Also, does it matter what my pushState is set to for this to work?

pvtallulah, this is my current app.js. Can you help me out with how to make your code work?

// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app  = new Framework7({
  root: '#app', // App root element
  id: 'com.test.app', // App bundle ID
  name: 'My App', // App name
  theme: 'auto', // Automatic theme detection

  on: {
    init: function () {
    pageInit: function () {
      console.log('Page initialized')

  panel: {
    swipe: 'right',

  view: {
    pushState: true,  // Enable back button support

  sheet: {
    closeByBackdropClick: false,

  // App routes
  routes: routes,

$$('#toggle-dark').on('change', function () {

$$('#error-modal').on('sheet:open', function () {

// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/'


Turns out I was overlooking a key point. I had removed including Cordova.js in my build so the document.addEventListener would never trigger. Your code works perfectly and I ended up doing exactly what I wanted with the following code:

$$('#error-modal').on('sheet:open', function () {
  document.addEventListener("backbutton", chkModal, false);

function chkModal (e) {
  if (app.sheet.get('.sheet-modal') && app.sheet.get('.sheet-modal').opened) { // Sheet modal is open
    document.removeEventListener("backbutton", chkModal, false);