Bootstrap modal popup background screen won't close

Question

I am using Bootstrap & AngularJS to build an app. I am using the bootstrap modal popup for the content. Other pages are being loaded in to ng-view. The content which comes to ng-view has the modal popup, when I get the modal popup and when I click the button that links to next page, I am able to see the page behind but the modal popup background black opacity screen will be still there. How can I get rid of this? But when i run the pages separately I am not facing such problems.

code:

<div id="regular-service" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                  <!--<img class="modal-cont" src="images/popup.png">-->

                  <div class="data-extract-popup">
                       <div class="data-extract-heading">How do you want to use this data?</div> 
                        <table class="data-extract-table"> 
                        <tr>
                          <td><a href="#/clean-data" class="btn btn-lg btn-warning">CLEAN DATA</a></td>
                          <td><a href="#/raw-data" class="btn btn-lg btn-warning">RAW DATA</a></td>
                        </tr>
                        <tr>
                          <td>Cleaned up for your use.May have some missing pieces.</td>
                          <td>All pieces of data are intact here.</td>
                        </tr>
                      </table>
                    </div>
                </div>
                </div>                
            </div>
        </div>

Modal:

  $(".regular").click(function(){
    $("#regular-service").modal('show');
  });

Here is how it looks. before popup

After popup:

still the popup background remains same

Answer 1

Its a general behaviour of a modal, that when it opens its background becomes inert and it fades out. You can opt to not fade out but in that case also background will always be inert. The method to NOT fade out is:

  $(".regular").click(function(){
     $("#regular-service").modal({backdrop: "false"});
  });

A simple fiddle for this http://jsfiddle.net/bgutxt3y/ . Try open modal using button "Open modal for @getbootstrap". This fiddle uses HTML to set backdrop to false using

  data-backdrop="false"

in the HTML of button invoking Modal

Answer 2

Try This Example...

 $('.launchConfirm').on('click', function (e) { $('#confirm') .modal({ backdrop: 'static', keyboard: false }) .one('click', '[data-value]', function (e) { if($(this).data('value')) { alert('confirmed'); } else { alert('canceled'); } }); }); 

 body, .modal-open .page-container, .modal-open .page-container .navbar-fixed-top, .modal-open .modal-container { overflow-y: scroll; } @media (max-width: 979px) { .modal-open .page-container .navbar-fixed-top{ overflow-y: visible; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/> <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"/> <link href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet"/> <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script> <script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script> <script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script> <div class="page-container"> <div class="container"> <br /> <button class="btn launchConfirm">Launch Confirm</button> </div> </div> <div id="confirm" class="modal hide fade"> <div class="modal-body"> Do you want to continue? </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button> <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button> </div> </div> 

Answer 3

I have experienced this issue, and it was very hard to find a solution, after a lot of search, i found this method to hide the backdrop with jquery $('.modal-backdrop').hide();

If you change your state and you have an opened modal, the modal will go away, but the backdrop will be there and you wont be able to click anywhere on the screen, i managed to solve this problem using that jquery method on the .run funtion of angular like this:

angular.run(function($rootScope) {
      $rootScope.$on('$routeChangeStart', destroyTheBackdrop);

      function destroyTheBackdrop() {
        $('.modal-backdrop').hide();
      }
    });

This will call the method everytime you change a route, and no more ghost backdrops. If you are using ui-router , use '$stateChangeStart' instead of '$routeChangeStart'.