When a modal popup dialog is opened, even if I add a close button (usually a X on top right), some users on mobile will use their mobile "Back button" to close the popup. But instead this will quit the site!

How to make the mobile "Back button" close the popup instead of exiting the website?

document.getElementById("link").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popupdarkbg").style.display = "block";
  document.getElementById("popup").style.display = "block";
    document.getElementById('popupdarkbg').onclick = function() {
      document.getElementById("popup").style.display = "none";
      document.getElementById("popupdarkbg").style.display = "none";
  };
  return false;
}

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

<div id="main">
<a href="" id="link">Click me</a><br>
</div>
<div id="popup">This is a popup window! Click mobile "Back button"</div>
<div id="popupdarkbg"></div>

When a modal popup dialog is opened, even if I add a close button (usually a X on top right), some users on mobile will use their mobile "Back button" to close the popup. But instead this will quit the site!

How to make the mobile "Back button" close the popup instead of exiting the website?

document.getElementById("link").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popupdarkbg").style.display = "block";
  document.getElementById("popup").style.display = "block";
    document.getElementById('popupdarkbg').onclick = function() {
      document.getElementById("popup").style.display = "none";
      document.getElementById("popupdarkbg").style.display = "none";
  };
  return false;
}

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

<div id="main">
<a href="" id="link">Click me</a><br>
</div>
<div id="popup">This is a popup window! Click mobile "Back button"</div>
<div id="popupdarkbg"></div>

Notes:

• I've already seen this Codepen How to disable browser back button using JavaScript, but I'm not sure it it's cross-browser on Chrome, Firefox, Safari and on Android, iOS, etc.

• I've already seen answers about window.onpopstate = function () { history.go(1); }; but I want to make sure this is the good practice to do it here, (so it's not a duplicate of them).

• javascript
• responsive-design
• modal-dialog
• back-button

• pushState is very well supported across various browsers and platforms, and this approach is a mon practice. Unless you're specifically targeting IE9 or lower, you'll be fine. – Máté Safranka Commented Apr 21, 2018 at 9:45
• @MátéSafranka so would you do window.onpopstate = function () { history.go(1); }; only when popup is open and window.onpopstate = function () { }; (or something else?) when the popup is closed so that, when the popup is closed, they can still go back to previous site? – Basj Commented Apr 21, 2018 at 9:48

2 Answers 2

Here's a rough version of how I do it in my apps:

var showModal = function() {
    // some code here to show the HTML elements...

    window.history.pushState('backPressed', null, null);
    window.history.pushState('dummy', null, null);
    window.addEventListener('popstate', hideModal, { once: true });
};

var hideModal = function(event) {
    if (event.state == 'backPressed') {
        // hide the HTML elements
    }
};

The reason I add two dummy states is because the popstate event also fires when the URL hash changes, e.g. when the user overwrites the hash manually in the address bar. Checking if the current history state matches backPressed lets me verify that the event was indeed triggered by the Back button.

Here is a minor variation of the accepted answer (*), that I'm finally using:

window.history.pushState('popupclosed', null, null);    // initial state: closed

var hideModal = function(event) {
    if (event.state == 'popupclosed') {
        closepopup();
    }
};

var showModal = function(event) {
    if (history.state !== 'opened') {
        window.history.pushState('opened', null, null);
    }
    window.addEventListener('popstate', hideModal, { once: true });   

The difference with (*) is that here:

• we only add 1 new state per popup opening in the browser history, instead of 2

• in the case the previous popup was closed with the X top-right button of the popup (but not using "Previous in history" browser button or "Back button" on phone), then when opening a second popup, don't recreate a new history state opened because it's already the current state.