Question

我正在使用Bootstrap＆amp; 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');
  });

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

enter image description here

弹出后：

enter image description here

仍然弹出背景保持不变

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（）;

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

angular.run(function($rootScope) { $rootScope.$on('$routeChangeStart', destroyTheBackdrop); function destroyTheBackdrop() { $('.modal-backdrop').hide(); } });

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

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

3 个答案: