bootstrap-ui 模态不显示其背后的灰色背景，（打开时未添加模态背景 class）

Question

由于某种原因，我的模态打开时没有灰色背景，尽管我使用的代码与该网站中的代码相同：http://angular-ui.github.io/bootstrap/#/modal
唯一的区别是我使用了来自单独 html 文件的模板，而不是在 <script> 标签内。

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

Answer 1

固定，
我将 windowTemplateUrl 添加到 $modal.open({..}) 选项对象
覆盖模态 main window : 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>

Answer 2

将此 class 添加到打开函数的选项中：'backdropClass : 'modal-backdrop h-full' 像这样：

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      backdropClass  : 'modal-backdrop h-full',
      ...
});

Answer 3

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

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

此解决方案优于已接受的解决方案的优点是您不会松散地关闭对背景的点击。

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

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

bootstrap-ui 模态不显示其背后的灰色背景，（打开时未添加模态背景 class）

bootstrap-ui modal not showing the grey background behind it, (modal-backdrop class is not added on open)

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap