angularjs - Angular Modal Service 不会使背景变灰

Question

我在 plunkur 有以下示例
click here to open link

var app = angular.module('App', ['ui.bootstrap']);

try {
app.service('loginModalService', function ($modal, $rootScope) {

    function assignCurrentUser(user) {
        $rootScope.currentUser = user;
        return user;
    }

    return function () {
        var instance = $modal.open({
            templateUrl: 'loginModalTemplate.html',
            controller: 'LoginModalCtrl',
            controllerAs: 'LoginModalCtrl',
            windowClass: 'vertical-center',
            backdrop: true,
            backdrop: 'static',
            sticky: true
        })

        return instance.result.then(assignCurrentUser);
    };

});
} catch (e) {
alert("Error --- " + e.message);
}


//UsersAPI is service to validate on server
app.controller('LoginModalCtrl', function ($scope, loginModalService) {

this.cancel = $scope.$dismiss;
$scope.showModal = function () {
    loginModalService()
         .then(function () {
             alert("OK Selected ");
             //return $state.go(toState.name, toParams);
         })
         .catch(function () {
             console.log("User Cancelled Login hence Navigation Cancelled ");
             //return $state.go('home');
         });
}
this.submit = function (email, password) {
    //  UsersApi.login(email, password).then(function (user) {
    //      $scope.$close(user);
    //  });
    $scope.$close("abc");
};

});

我无法尝试使用淡入淡出变灰的背景。
如果我在类中添加淡入淡出，则模式不会打开

我错过了什么？

另外为什么不在屏幕中央显示自己？

Answer 1

在 Bootstrap 3.3.1 ，修改了 .modal-backdrop CSS 属性。该更改导致模态背景具有绝对定位，而不是固定定位并且没有设置底部属性。 Bootstrap JS 文件没有使用底部属性，而是注入(inject)了一个内联样式，将模态背景的高度设置为视口(viewport)的高度。 中的模态服务UI- Bootstrap 0.12.0 不会在模态背景上注入(inject)高度，因此，背景就在那里，但它没有高度，你看不到它。

有两种方法可以解决这个问题:

您可以按照@sal-niro 的建议进行操作，并使用旧版本的 Bootstrap CSS 或

您可以简单地将以下内容添加到您的自定义样式中:

CSS:

.modal-backdrop {
  bottom:0;
}

回答您关于 的第二个问题如何使模态垂直居中 在窗口中，您也可以使用一些自定义 CSS 来完成此操作。仅供引用，这种方法基于 CSS 变换，所以它是 IE8 不支持 并且仅在带有 -ms- 前缀的 IE9 中受支持。

.modal.fade .modal-dialog, .modal.in .modal-dialog {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.modal-content {
  position: absolute;
  top:50%;
  -ms-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
  width:100%;
}

Plunker Demo

在更新的演示中，我使用了您的代码，只是稍微修改了模板并将其添加到模板缓存中。