角度模态服务不会使背景变灰

时间:2015-02-13 17:44:26

标签: angularjs angular-ui-bootstrap

我在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");
};

});

我无法使用淡入淡出尝试灰色背景。 如果我将淡入淡出添加到类中,则模态不会打开

我缺少什么?

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

1 个答案:

答案 0 :(得分:17)

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

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

  1. 您可以按照@ sal-niro的建议进行操作,并使用旧版本的Bootstrap CSS,
  2. 您只需将以下内容添加到自定义样式中:
  3. <强> CSS:

    .modal-backdrop {
      bottom:0;
    }
    

    要回答关于如何将模式垂直居中的第二个问题,您可以使用一些自定义CSS来完成此操作。仅供参考,这种方法基于CSS转换,因此在IE8中不支持,并且仅在IE9中使用-ms-前缀支持。

    .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

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