When browser back button is clicked, bootstrap mod

问题:

I am using Backbone with bootstrap. Problem is when you go through application and in some point you open bootstrap modal window and press back button, modal window closes but modal background div (modal-backdrop) stays and does not disappear. It overlays whole screen and you cant click on anything. I noticed that when you close modal normally modal-backdrop div is removed from html and in this situation it stays.

I was searching for this solution on web, and found similar things, but none of them were tide with browser back button pressed.

I thought about catching browser back button event and user jquery to remove that div, but that is not really good solution.

Can someone point out some solutions for this problem? Or at last tell me why is that happening.

EDIT: When back button is pressed, modal does not throw hide.bs.modal event, so i cant catch it and remove modal-backdrop div

回答1:

We encountered this problem in Web and Mobile Application developed using AngularJS_v1.4.7 and Bootstrap_v3.0. The expected behavior (across the application) was, Popup should close and page transition should NOT happen. In other words, back button just closes the popup and nothing else.

Below fix worked fine,

//Detect location change
$rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
        // Select open modal(s)
        var $openModalSelector = $(".modal.fade.in"); 
        if( ($openModalSelector.data('bs.modal') || {}).isShown == true){
            // Close open modal(s)
            $openModalSelector.modal("hide");
            // Prevent page transition
            event.preventDefault();
        }
    });

This fix was tested successfully on,

• Chrome browser on desktop
• Windows 8.1 Phone
• Android Lollipop

回答2:

You can listen to the HTML5 popstate event and then fire the hide.bs.modal event if you find that the modal-backdrop is displayed.

$(window).on('popstate', function() {
  alert('Back button was pressed.');
});

Or use the History.js tool and it's events to catch the back button event and then do the same as the previous solution.

回答3:

Try this.Its works for me.

<script type="application/javascript">
    $(window).on('popstate', function() {
        $('.modal').modal('hide');
        $( ".modal-backdrop" ).remove();
        $( ".in" ).remove();
    });
</script>