bootstrap-ui模态不显示它背后的灰色背景,(打开时不添加模态背景类)

Question

出于某种原因我的模态打开时没有灰色背景,虽然我使用与那里的网站相同的代码:http://angular-ui.github.io/bootstrap/#/modal
唯一的区别是我使用了模板来自分离的html文件而不是<script>标签内.

我注意到它没有添加此代码:<div class="modal-backdrop fade in"></div> 在主模式容器内<div class="modal fade in">

Answer 1

问题是原始背景的高度为0px,要修复添加以下样式:

<style>
    .modal-backdrop {
        height: 100%;
    }
</style>

此解决方案优于已接受的解决方案的优点是您不会忽略点击背景的点击.

如果您不喜欢背景消除模式,请将以下内容添加到$ modal.open:

$modal.open({
    ...
    backdrop: 'static',
    ...

Answer 2

已修复，
我添加windowTemplateUrl到 覆盖模式主窗口的$modal.open({..})选项对象： https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

所以开放代码如下所示：

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      windowTemplateUrl: 'modalWindowTemplte.html'
      ...
    });

并且覆盖模板现在被迫包含div.modal-backdrop

<script type="text/ng-template" id="modalWindowTemplte.html">
        <div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}">
            <div class="modal-backdrop fade in"></div>
            <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div>
        </div>
    </script>