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

时间:2015-02-14 21:01:11

标签: angularjs twitter-bootstrap angular-ui angular-ui-bootstrap

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

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

3 个答案:

答案 0 :(得分:9)

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

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

此解决方案优于已接受的解决方案的优势在于,您不会因为点击背景而忽略解雇。

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

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

答案 1 :(得分:1)

固定,
我将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>

答案 2 :(得分:1)

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

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