Close pop up on back button

Question

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?

Answer 1

By clicking back, automatically $('.modal').hide() function get activated. So no need to hide modal. We can see grey shaded background after back button.You can use either of these line of code to close modal pop up.

1. $('.modal' ).modal( 'hide' ).data( 'bs.modal', null ); [work on bootstrap 3]

Or

2. $('body').removeClass('modal-open');

   $('.modal-backdrop').remove();

Inspect the page when modal is active you can see these classes. Do correct me if this method is wrong or other simple way exist.

Answer 2

Issue : When a modal is open and the user clicks browser's back button, the page navigates (backwards or forward) but the modal remains open.

Solution :

In Javascript :

$(window).on('popstate', function() {
  $('.modal').click();     
});

In Angular :

  ngAfterViewInit() {
$(window).on('popstate', function() {
  $('.modal').click();     
});}

Answer 3

I'll did it like this :

// 2.0 and above
@Override
public void onBackPressed(evt) {
    evt.preventDefault();
    closeTab();
}

// Before 2.0
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        evt.preventDefault();
        closeTab();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

--> These are handlers btw, need addEventListener =)

I've done it by memory, i'll check it later when i find it in my 'code mess' folder

Answer 4

according to http://www.mylearning.in/2015/06/close-modal-pop-up-on-back-button.html

    $('#myModal').on('show.bs.modal', function(e) {
        window.location.hash = "modal";
    });

    $(window).on('hashchange', function (event) {
        if(window.location.hash != "#modal") {
            $('#myModal').modal('hide');
        }
    });

Answer 5

I write this code for my own website

and tested too many times with different devices and browsers

Chromium 71 , Chrome 67 , FireFox 65 , Android 4.1 , Android 4.2 , Android 7.1

window.onload=function(){

    State=0;

    $(".modal").on("show.bs.modal",function(){
        path=window.location.pathname+window.location.search;
        history.pushState("hide",null,path);
        history.pushState("show",null,path);
        State="show";
    })
    .on("hidden.bs.modal",function(){
        if(!!State)
            history.go(State=="hide"?-1:-2);
    });

    setTimeout(function(){// fix old webkit bug
        window.onpopstate=function(e){
            State=e.state;
            if(e.state=="hide"){
                $(".modal").modal("hide");
            }
        };
    },999);

    $("#myModal").modal("show");
};

• dont use $(document).ready instead of window.onload

Answer 6

My Solution in Angular

// push history state when a dialog is opened
dialogRef.afterOpened.subscribe((ref: MatDialogRef<any, any>) => {
  window.history.pushState(ref.id, '');
  // pop from history if dialog has not been closed with back button, and gurrent state is still ref.id
  ref.afterClosed().subscribe(() => {
    if (history.state === ref.id) {
      window.history.go(-1);
    }
  });
});