Question

163

Close pop up on back button

rated 0 times [ 168] [ 5] / answers: 1 / hits: 51120 / 10 Years ago, tue, august 19, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tobyl

Add To Favorites

Follow

Total Points: 598

Total Questions: 110

Total Answers: 114

Location: Vietnam

Member since Sat, Feb 12, 2022

2 Years ago

tobyl questions

1 How to update State of chart.js in React

Tue, Aug 10, 21, 00:00, 3 Years ago

1 Angular Jasmine this service method is a not a function

Wed, Jan 13, 21, 00:00, 3 Years ago

1 Double sided input slider in React

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Formatting Strings to Datetime using specific formats in Luxon

Mon, Nov 2, 20, 00:00, 4 Years ago

1 Cannot find module 'react-native-reanimated/plugin' from /projectFolder

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 10 Years ago reina · Accepted Answer

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