Angular Modal Service 不会使背景变灰 [英] Angular Modal Service does not gray out background

问题描述

我在 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?

推荐答案

在 Bootstrap 3.3.1，修改了 .modal-backdrop CSS 属性.更改导致 modal-backdrop 具有绝对定位，而不是固定定位并且没有设置底部属性.Bootstrap JS 文件没有使用底部属性，而是注入了一个内联样式，将模态背景的高度设置为视口的高度.UI-Bootstrap 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:

1. 您可以按照@sal-niro 的建议进行操作，并使用旧版本的 Bootstrap CSS，或
2. 您可以简单地将以下内容添加到您的自定义样式中:

CSS:

.modal-backdrop {
  bottom:0;
}

要回答关于如何在窗口中垂直居中的第二个问题，您也可以使用一些自定义 CSS 来完成此操作.仅供参考，此方法基于 CSS 转换，因此 IE8 不支持，仅支持带有 -ms- 前缀的 IE9.

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

Plunker 演示

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

Plunker Demo

In the updated demo, I used your code except I modified the template slightly and added it to the template cache.

这篇关于Angular Modal Service 不会使背景变灰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！