角模态服务不变灰背景背景、模态

2023-09-13 05:01:31 作者：没你的地方不是家

我在plunkur下面的示例点击这里打开链接

I have the following sample at 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");
};

});

我不能够得到变灰背景使用淡入尝试。如果我添加淡入到类，模态不开

I am not able to get the grayed background tried using fade. If i add fade into the class, the modal does not open

我想什么？

此外为什么没有在屏幕的中心显示本身

Additionally why is not displaying itself in the center of the screen?

推荐答案

在引导3.3.1 中，.modal-背景CSS属性进行了修改。这种变化导致了其绝对定位模式，背景，而不是固定的定位和没有底属性集。除了使用底部财产，引导JS文件注入内嵌式的模态-背景的高度设置为视口的高度。在服务模式的 UI-引导0.12.0 不注的模式，背景的高度，因此，背景是存在的，但它没有高度，你看不到它。

In Bootstrap 3.3.1, the .modal-backdrop CSS properties were modified. The change resulted in the modal-backdrop having absolute positioning, instead of fixed positioning and no bottom property set. Instead of using the bottom property, the Bootstrap JS file injects an inline style setting the height of the modal-backdrop to the height of the viewport. The modal service in UI-Bootstrap 0.12.0 doesn't inject the height on the modal-backdrop, thus, the backdrop is there, but it has no height and you don't see it.

有两种方法来实现这一点：

There are two ways to approach this:

您可以做如@ SAL-德尼罗建议，并使用CSS自举的是旧版本，或您可以简单地添加以下到您的自定义样式：

CSS：

.modal-backdrop {
  bottom:0;
}

要回答您关于如何中心的模式垂直在窗口中，你可以使用一个小自定义CSS过于实现这一目标的第二个问题。仅供参考，这种方法是基于CSS的IE8变换所以它的不支持并只支持IE9与-ms- preFIX。

To answer your second question about how to center the modal vertically in the window, you can use a little custom CSS to accomplish this too. FYI, this approach is based on CSS transform so it is not supported in IE8 and only supported in IE9 with the -ms- prefix.

.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%;
}