Menu
when user open site he can click Login button and then in modal see login form. But when user click on back browser button he returns on previous page. If previous page was start browser page he returns to start browser page.
Is it possible to only hide modal without any additional alerts when user clicks on browser back button? Also is possible to just hide this modal when user touch return button on his phone?(I'm just talking about button which exists on Android phones at the bottom of the phone which returns user to the previous window/screen)
PHP and JS code used on site.
Very appreciate any help
242
asked Nov 19 '25 20:11
The possible options for what you want are many, but I will try to give you a relatively easy example with JS code. For this example I have used Bootstrap Modal.
How this code works:
When you press the back button on the browser, the function searches for a modal window open.
When the modal element is open there are classes modal fade show. If an element with these classes is present in the code, the next step is performed.
In the next step, the function looks for the "Close" button and clicks it. The "Close" button has classes btn btn-secondary
This code works for desktop and mobile devices. After closing the modal window the BACK button returns to normal operation.
I hope I've been helpful
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
function back_Button() {
history.pushState(null, null);
window.addEventListener('popstate', () => {
// Add here the classes of the MODAL as they look when it is open
var x = document.getElementsByClassName('modal fade show')[0];
if (x) {
// Add here the classes of target Close Button
var z = x.getElementsByClassName('btn btn-secondary')[0];
z.click();
history.pushState(null, null);
} else {
window.history.back();
}
});
}
back_Button();
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With