When browser back button is clicked, bootstrap modal is closed but modal-dropback stays

Question

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

Answer 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

Answer 2

Try this.Its works for me.

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