Menu
I want to close pop up on click of back button for mobile. I implemented this using onhashchange:
window.onhashchange = function (event) { }; In this case, if pop up is opened multiple times then on click of back button, it opens and closes the modal pop up. But, I want modal pop up to close on first back and navigate to prev page on next back.
I also tried using onbeforeunload, but it will show another alert to leave or stay on the page.
$(window).bind('beforeunload', function(e) { return false; }); What is the best way to close the pop up on back button and redirect to prev page on next back?
386
When the modal dialog is open, pressing the back button closes it. On a multi-step modal dialog, the back button can even navigate backwards through the steps! On most web apps, pressing the back button while a modal dialog is open will navigate to the previous page, rather than closing the modal.
$(window). bind('beforeunload', function(e) { return false; });
Open popup. htm in your browser, click the button, and you'll see the problem. Click the red paragraph and you can test the close() function on a javascript-opened popup window (it'll work).
Master, I have used the code that to prevent the user from going back to previous pages after logout. function preventBack() { window. history. forward(); } setTimeout("preventBack()", 0); window.
if (window.history && window.history.pushState) { $('#myModal').on('show.bs.modal', function (e) { window.history.pushState('forward', null, './#modal'); }); $(window).on('popstate', function () { $('#myModal').modal('hide'); }); } bootply.com was down when I was testing my answer. See the inline script and comments at the bottom of the code below. The rest is just Twitter Bootstrap boilerplate so that I could easily test it locally.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>modal.html</title> <!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <p>If you press the back button now, you should return to whatever page you were on before this page.</p> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Show me the modal!</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <p>If you press the web browser's back button OR the modal's close buttons, the modal will close and the hash will return to "modal.html#modalClosed".</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript"> // Immutable hash state identifiers. var closedModalHashStateId = "#modalClosed"; var openModalHashStateId = "#modalOpen"; /* Updating the hash state creates a new entry * in the web browser's history. The latest entry in the web browser's * history is "modal.html#modalClosed". */ window.location.hash = closedModalHashStateId; /* The latest entry in the web browser's history is now "modal.html#modalOpen". * The entry before this is "modal.html#modalClosed". */ $('#myModal').on('show.bs.modal', function(e) { window.location.hash = openModalHashStateId; }); /* When the user closes the modal using the Twitter Bootstrap UI, * we just return to the previous entry in the web * browser's history, which is "modal.html#modalClosed". This is the same thing * that happens when the user clicks the web browser's back button. */ $('#myModal').on('hide.bs.modal', function(e) { window.history.back(); }); </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
