Hide Modal window (Modal Box) when browser back button clicked

user_8124435 0
Viewed 1101

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

html php jquery javascript
1 Answers

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">&times;</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>
user_109681340
Related