angular ui 模态 bootstrap sass 不显示覆盖或不可见覆盖

Question

我正在使用模态 angular ui 一切都很好，但它的覆盖不可见或太褪色。

我正在使用 bootstrap sass 我试过了与：

$modal-backdrop-bg: red !default;
$modal-backdrop-opacity : 0.5 !default;

没有幸运

我的目标是展示我漂亮的模态带有深色覆盖层:)

Answer 1

我想我也遇到了同样的问题。

最终我决定使用它所测试的版本。

尝试使用 3.1.1. :)

Answer 2

尝试用这个

覆盖bootstrap模态class

.modal-backdrop {
  position:absolute !important;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000000;
  opacity: 0.6;
}

我还添加了这个 class 用于居中

.modal-center{
    position: fixed;
    top: 30%;
    left: 18.5%;
    z-index: 1050;
    width: 80%;
    height: 80%;
    margin-left: -10%;
}

这是我正在使用的模板：

<div class="modal-header">
            <button type="button" ng-click="cancel()" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title">some title</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a class="hand-cursor" ng-click="ok($index)">{{ item.label }}</a>
                </li>
            </ul>
            <p class="text-center">
                Selected: <b>{{ selected.item.label }}</b>
            </p>
        </div>
        <div class="modal-footer">
        </div>

这是 $modal 实例的代码

var modalInstance = $modal.open({
    templateUrl: 'sometemplate.tpl.html',
    controller: 'ModalInstanceController',
    windowClass:'modal-center modal fade in',
    resolve: {
        items: function () {
            scope.items = ModelerMenusource; // <-- a simple array with the list of items
            return scope.items;
            }
        }
    });

angular ui 模态 bootstrap sass 不显示覆盖或不可见覆盖

angular ui modal bootstrap sass not showing overlay or not visible overlay

angularjs

sass

angular-ui

bootstrap-modal