Bootstrap模态弹出背景屏幕不会关闭

Question

我正在使用Bootstrap和AngularJS来构建应用程序。 我正在使用bootstrap模式弹出窗口的内容。 其他页面正在加载到ng-view中。 来到ng-view的内容有模态弹出窗口，当我得到模态弹出窗口时，当我点击链接到下一页的按钮时，我能够看到后面的页面，但模态弹出窗口背景黑色不透明度屏幕仍然是那里。 我怎么能摆脱这个？ 但是，当我单独运行页面时，我没有遇到这样的问题。

码：

<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>

莫代尔：

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

这是它的外观。 在弹出之前

弹出后：

仍然弹出背景保持不变

Answer 1

它是模态的一般行为，当它打开时，它的背景变得惰性并逐渐消失。 您可以选择不淡出，但在这种情况下，背景也将始终是惰性的。 不淡出的方法是：

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

这个http://jsfiddle.net/bgutxt3y/的简单小提琴。 使用按钮“打开模态为@getbootstrap”尝试打开模态。 这个小提琴使用HTML将背景设置为false

  data-backdrop="false"

在按钮的HTML中调用Modal

Answer 2

试试这个例子......

 $('.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

我经历过这个问题，很难找到解决方案，经过大量搜索后，我发现这种方法用jquery $（'。modal-backdrop'）来隐藏背景.hide （）;

如果你改变你的状态并且你有一个打开的模态，模态将消失，但背景将在那里，你将无法点击屏幕上的任何地方，我设法使用.run上的jquery方法解决这个问题。像这样的角度函数：

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

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

每次更改路线时都会调用该方法，并且不再有鬼背景。 如果您使用的是ui-router ，请使用'$ stateChangeStart'而不是'$ routeChangeStart'。