How do I make the mobile back button close a modal without returning to the previous page?

Question

On mobile, my modals cover the whole screen. They look exactly like whole new web pages. This leads to users getting confused. They expect to be able to press the back button and have the modal close. Instead the back button takes them back what they perceive as two steps.

I'm a novice at coding, so Javascript is all I've used for this, and even saying that feels like overselling my ability. I'm hoping you guys can help me figure this out.

Here's the code I used:

// Modals

// Modal Contact

function OpenModalContact () {
    document.getElementById("Modal-Contact").style.display = "block";
}

// Modal-1 to 20
{
     var modal1 = document.getElementById('Modal-01');
    var modal2 = document.getElementById('Modal-02');
    var modal3 = document.getElementById('Modal-03');
    var modal4 = document.getElementById('Modal-04');
    var modal5 = document.getElementById('Modal-05');
    var modal6 = document.getElementById('Modal-06');
    var modal7 = document.getElementById('Modal-07');
    var modal8 = document.getElementById('Modal-08');
    var modal9 = document.getElementById('Modal-09');
    var modal10 = document.getElementById('Modal-10');
    var modal11 = document.getElementById('Modal-11');
    var modal12 = document.getElementById('Modal-12');
    var modal13 = document.getElementById('Modal-13');
    var modal14 = document.getElementById('Modal-14');
    var modal15 = document.getElementById('Modal-15');
    var modal16 = document.getElementById('Modal-16');
    var modal17 = document.getElementById('Modal-17');
    var modal18 = document.getElementById('Modal-18');
    var modal19 = document.getElementById('Modal-19');
    var modal20 = document.getElementById('Modal-20');
    var modalContact = document.getElementById('Modal-Contact');
    // Get the button that opens the modal
    var Modalbtn01 = document.getElementById("ModalBtn01");
    var Modalbtn02 = document.getElementById("ModalBtn02");
    var Modalbtn03 = document.getElementById("ModalBtn03");
    var Modalbtn04 = document.getElementById("ModalBtn04");
    var Modalbtn05 = document.getElementById("ModalBtn05");
    var Modalbtn06 = document.getElementById("ModalBtn06");
    var Modalbtn07 = document.getElementById("ModalBtn07");
    var Modalbtn08 = document.getElementById("ModalBtn08");
    var Modalbtn09 = document.getElementById("ModalBtn09");
    var Modalbtn10 = document.getElementById("ModalBtn10");
    var Modalbtn11 = document.getElementById("ModalBtn11");
    var Modalbtn12 = document.getElementById("ModalBtn12");
    var Modalbtn13 = document.getElementById("ModalBtn13");
    var Modalbtn14 = document.getElementById("ModalBtn14");
    var Modalbtn15 = document.getElementById("ModalBtn15");
    var Modalbtn16 = document.getElementById("ModalBtn16");
    var Modalbtn17 = document.getElementById("ModalBtn17");
    var Modalbtn18 = document.getElementById("ModalBtn18");
    var Modalbtn19 = document.getElementById("ModalBtn19");
    var Modalbtn20 = document.getElementById("ModalBtn20");
    // Get the <span> element that closes the modal
    var span1 = document.getElementById("CloseModal-01");
    var span2 = document.getElementById("CloseModal-02");
    var span3 = document.getElementById("CloseModal-03");
    var span4 = document.getElementById("CloseModal-04");
    var span5 = document.getElementById("CloseModal-05");
    var span6 = document.getElementById("CloseModal-06");
    var span7 = document.getElementById("CloseModal-07");
    var span8 = document.getElementById("CloseModal-08");
    var span9 = document.getElementById("CloseModal-09");
    var span10 = document.getElementById("CloseModal-10");
    var span11 = document.getElementById("CloseModal-11");
    var span12 = document.getElementById("CloseModal-12");
    var span13 = document.getElementById("CloseModal-13");
    var span14 = document.getElementById("CloseModal-14");
    var span15 = document.getElementById("CloseModal-15");
    var span16 = document.getElementById("CloseModal-16");
    var span17 = document.getElementById("CloseModal-17");
    var span18 = document.getElementById("CloseModal-18");
    var span19 = document.getElementById("CloseModal-19");
    var span20 = document.getElementById("CloseModal-20");
    var spanContact = document.getElementById("CloseModalContact");
    // When the user clicks on the button, open the modal
    ModalBtn01.onclick = function() {
        modal1.style.display = "block";
    }
    ModalBtn02.onclick = function() {
        modal2.style.display = "block";
    }
    ModalBtn03.onclick = function() {
        modal3.style.display = "block";
    }
    ModalBtn04.onclick = function() {
        modal4.style.display = "block";
    }
    ModalBtn05.onclick = function() {
        modal5.style.display = "block";
    }
    ModalBtn06.onclick = function() {
        modal6.style.display = "block";
    }
    ModalBtn07.onclick = function() {
        modal7.style.display = "block";
    }
    ModalBtn08.onclick = function() {
        modal8.style.display = "block";
    }
    ModalBtn09.onclick = function() {
        modal9.style.display = "block";
    }
    ModalBtn10.onclick = function() {
        modal10.style.display = "block";
    }
    ModalBtn11.onclick = function() {
        modal11.style.display = "block";
    }
    ModalBtn12.onclick = function() {
        modal12.style.display = "block";
    }
    ModalBtn13.onclick = function() {
        modal13.style.display = "block";
    }
    ModalBtn14.onclick = function() {
        modal14.style.display = "block";
    }
    ModalBtn15.onclick = function() {
        modal15.style.display = "block";
    }
    ModalBtn16.onclick = function() {
        modal16.style.display = "block";
    }
    ModalBtn17.onclick = function() {
        modal17.style.display = "block";
    }
    ModalBtn18.onclick = function() {
        modal18.style.display = "block";
    }
    ModalBtn19.onclick = function() {
        modal19.style.display = "block";
    }
    ModalBtn20.onclick = function() {
        modal20.style.display = "block";
    }
    // When the user clicks on <span> (x), close the modal
    spanContact.onclick = function() {
        modalContact.style.display = "none";
    }
    span1.onclick = function() {
        modal1.style.display = "none";
    }
    span2.onclick = function() {
        modal2.style.display = "none";
    }
    span3.onclick = function() {
        modal3.style.display = "none";
    }
    span4.onclick = function() {
        modal4.style.display = "none";
    }
    span5.onclick = function() {
        modal5.style.display = "none";
    }
    span6.onclick = function() {
        modal6.style.display = "none";
    }
    span7.onclick = function() {
        modal7.style.display = "none";
    }
    span8.onclick = function() {
        modal8.style.display = "none";
    }
    span9.onclick = function() {
        modal9.style.display = "none";
    }
    span10.onclick = function() {
        modal10.style.display = "none";
    }
    span11.onclick = function() {
        modal11.style.display = "none";
    }
    span12.onclick = function() {
        modal12.style.display = "none";
    }
    span13.onclick = function() {
        modal13.style.display = "none";
    }
    span14.onclick = function() {
        modal14.style.display = "none";
    }
    span15.onclick = function() {
        modal15.style.display = "none";
    }
    span16.onclick = function() {
        modal16.style.display = "none";
    }
    span17.onclick = function() {
        modal17.style.display = "none";
    }
    span18.onclick = function() {
        modal18.style.display = "none";
    }
    span19.onclick = function() {
        modal19.style.display = "none";
    }
    span20.onclick = function() {
        modal20.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modalContact) {
            modalContact.style.display = "none";
        }
        if (event.target == modal1) {
            modal1.style.display = "none";
        }
        if (event.target == modal2) {
            modal2.style.display = "none";
        }
        if (event.target == modal3) {
            modal3.style.display = "none";
        }
        if (event.target == modal4) {
            modal4.style.display = "none";
        }
        if (event.target == modal5) {
            modal5.style.display = "none";
        }
        if (event.target == modal6) {
            modal6.style.display = "none";
        }
        if (event.target == modal7) {
            modal7.style.display = "none";
        }
        if (event.target == modal8) {
            modal8.style.display = "none";
        }
        if (event.target == modal9) {
            modal9.style.display = "none";
        }
        if (event.target == modal10) {
            modal10.style.display = "none";
        }
        if (event.target == modal11) {
            modal11.style.display = "none";
        }
        if (event.target == modal12) {
            modal12.style.display = "none";
        }
        if (event.target == modal13) {
            modal13.style.display = "none";
        }
        if (event.target == modal14) {
            modal14.style.display = "none";
        }
        if (event.target == modal15) {
            modal15.style.display = "none";
        }
        if (event.target == modal16) {
            modal16.style.display = "none";
        }
        if (event.target == modal17) {
            modal17.style.display = "none";
        }
        if (event.target == modal18) {
            modal18.style.display = "none";
        }
        if (event.target == modal19) {
            modal19.style.display = "none";
        }
        if (event.target == modal20) {
            modal20.style.display = "none";
        }

    }


}

// Close modal on ESC key press

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 27 && 
  (document.querySelector("#Modal-Contact").style.display === "block" ||
   document.querySelector("#Modal-01").style.display === "block" ||
   document.querySelector("#Modal-02").style.display === "block" ||
   document.querySelector("#Modal-03").style.display === "block" ||
   document.querySelector("#Modal-04").style.display === "block" ||
   document.querySelector("#Modal-05").style.display === "block" ||
   document.querySelector("#Modal-06").style.display === "block" ||
   document.querySelector("#Modal-07").style.display === "block" ||
   document.querySelector("#Modal-08").style.display === "block" ||
   document.querySelector("#Modal-09").style.display === "block" ||
   document.querySelector("#Modal-10").style.display === "block" ||
   document.querySelector("#Modal-11").style.display === "block" ||
   document.querySelector("#Modal-12").style.display === "block" ||
   document.querySelector("#Modal-13").style.display === "block" ||
   document.querySelector("#Modal-14").style.display === "block" ||
   document.querySelector("#Modal-15").style.display === "block" ||
   document.querySelector("#Modal-16").style.display === "block" ||
   document.querySelector("#Modal-17").style.display === "block" ||
   document.querySelector("#Modal-18").style.display === "block" ||
   document.querySelector("#Modal-19").style.display === "block" ||
   document.querySelector("#Modal-20").style.display === "block"  )) 
  
  
  
  {       
    document.querySelector("#Modal-Contact").style.display = "none";
    document.querySelector("#Modal-01").style.display = "none";
    document.querySelector("#Modal-02").style.display = "none";
    document.querySelector("#Modal-03").style.display = "none";
    document.querySelector("#Modal-04").style.display = "none";
    document.querySelector("#Modal-05").style.display = "none";
    document.querySelector("#Modal-06").style.display = "none";
    document.querySelector("#Modal-07").style.display = "none";
    document.querySelector("#Modal-08").style.display = "none";
    document.querySelector("#Modal-09").style.display = "none";
    document.querySelector("#Modal-10").style.display = "none";
    document.querySelector("#Modal-11").style.display = "none";
    document.querySelector("#Modal-12").style.display = "none";
    document.querySelector("#Modal-13").style.display = "none";
    document.querySelector("#Modal-14").style.display = "none";
    document.querySelector("#Modal-15").style.display = "none";
    document.querySelector("#Modal-16").style.display = "none";
    document.querySelector("#Modal-17").style.display = "none";
    document.querySelector("#Modal-18").style.display = "none";
    document.querySelector("#Modal-19").style.display = "none";
    document.querySelector("#Modal-20").style.display = "none";
  }
});





// Close modal on back button for mobile

document.addEventListener("backbutton", function(event) {
  if
  (document.querySelector("#Modal-Contact").style.display === "block" ||
   document.querySelector("#Modal-01").style.display === "block" ||
   document.querySelector("#Modal-02").style.display === "block" ||
   document.querySelector("#Modal-03").style.display === "block" ||
   document.querySelector("#Modal-04").style.display === "block" ||
   document.querySelector("#Modal-05").style.display === "block" ||
   document.querySelector("#Modal-06").style.display === "block" ||
   document.querySelector("#Modal-07").style.display === "block" ||
   document.querySelector("#Modal-08").style.display === "block" ||
   document.querySelector("#Modal-09").style.display === "block" ||
   document.querySelector("#Modal-10").style.display === "block" ||
   document.querySelector("#Modal-11").style.display === "block" ||
   document.querySelector("#Modal-12").style.display === "block" ||
   document.querySelector("#Modal-13").style.display === "block" ||
   document.querySelector("#Modal-14").style.display === "block" ||
   document.querySelector("#Modal-15").style.display === "block" ||
   document.querySelector("#Modal-16").style.display === "block" ||
   document.querySelector("#Modal-17").style.display === "block" ||
   document.querySelector("#Modal-18").style.display === "block" ||
   document.querySelector("#Modal-19").style.display === "block" ||
   document.querySelector("#Modal-20").style.display === "block"  ) 
  
  
  
  {       
    document.querySelector("#Modal-Contact").style.display = "none";
    document.querySelector("#Modal-01").style.display = "none";
    document.querySelector("#Modal-02").style.display = "none";
    document.querySelector("#Modal-03").style.display = "none";
    document.querySelector("#Modal-04").style.display = "none";
    document.querySelector("#Modal-05").style.display = "none";
    document.querySelector("#Modal-06").style.display = "none";
    document.querySelector("#Modal-07").style.display = "none";
    document.querySelector("#Modal-08").style.display = "none";
    document.querySelector("#Modal-09").style.display = "none";
    document.querySelector("#Modal-10").style.display = "none";
    document.querySelector("#Modal-11").style.display = "none";
    document.querySelector("#Modal-12").style.display = "none";
    document.querySelector("#Modal-13").style.display = "none";
    document.querySelector("#Modal-14").style.display = "none";
    document.querySelector("#Modal-15").style.display = "none";
    document.querySelector("#Modal-16").style.display = "none";
    document.querySelector("#Modal-17").style.display = "none";
    document.querySelector("#Modal-18").style.display = "none";
    document.querySelector("#Modal-19").style.display = "none";
    document.querySelector("#Modal-20").style.display = "none";

    event.preventDefault();
  }
});

I've incorporated this, event.preventDefault(); but it doesn't seem to work

I hoped it would prevent the back button from doing it's default behaviour.

I've seen a post on here about something like this:

https://stackoverflow.com/a/49954532/18237477

But I'm unable to incorporate that solution into my code. Their code probably works but I don't understand it. I don't know how to merge that code into mine.

Can you explain the behavior they experience in more details and the behavior of your preference in more details? — Lajos Arpad, Feb 01 '23 at 18:01
@Lajos Arpad When the user presses the "learn more" button, that triggers a pop up. On mobile the pop-up covers the whole screen. My users interpret this behavior like a hyperlink. They think they opened a new page. So, missing the "[X] to close button" they find it natural to press the back button in order to return to the previous state. I want to make the back button function in the way they expect. This means that I need to prevent the normal behavior of the back button (so it doesn't send them to a different URL) That's the part I'm having trouble with — Daniel T., Feb 02 '23 at 11:18
Thanks for the explanation! So, they are not actually opening a new page, but your button which imitates a back actually sends them two steps back? — Lajos Arpad, Feb 02 '23 at 13:25
I'm not sure you understood me. I don't have a "button which imitates a back" Android and IOS have back buttons as part of the navigation bars. My users want to use that button in order to close the modal. But that button has the default behavior of returning the user to the previous URL. I want to prevent the default behavior of the Android and IOS navigation bar back button. Once that behavior is prevented I want to use the input of the back button as a trigger to close the modal. This is the behavior my users would find intuitive — Daniel T., Feb 02 '23 at 15:30

How do I make the mobile back button close a modal without returning to the previous page?

0 Answers0