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>

Answer 3

将此类添加到open函数中的选项：'backdropClass：'modal-backdrop h-full' 像这样：

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

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

3 个答案: