how to disable or change action of "back" button in mobile and/or web?

I’ve built a web page using react.js, which contains a gallery of pictures.
when a picture is clicked i call a function which open a modal. this modal is on the same page, but it covers 100% of the page, like an overlay. eventually, when the modal is loaded, you get a picture in the center of the page(50% width & 50% height -css), and the rest is just dimmed background.
when the user wants to exit(close) the modal he’s got 2 options:
1). he can click on a “X” button which fires a function to hide() the modal.
2). he can click on the dimmed background(overlay).

so far so good!
the problem starts in mobile. whenever the user click on the “back” button to close/hide the modal it immediately takes him back to the previous page.

my question is: how can i overcome this problem?
is there a way to alter the action of this “back” button?

I’ve been trying to solve this problem desperately, i searched the web for a solution but all i got was nothing.

any help will be much appreciated!


Source: javascript

Leave a Reply