Question

我在Angular JS中有我的模态窗口。当我打开这个模态窗口时，有些人可以回答我如何向身体添加模糊效果。

vm.OpenLogin = function () {
            var data = loginWizardService.getData().then(function (response) {
                $("#loginWizard").append($compile(response.data)($scope));

                $rootScope.modalInstance = $uibModal.open({
                    templateUrl: templUrl,
                    controller: OpenLoginWizardCtrl,
                    backdrop: 'static',    
                    keyboard: false
                });
            });
        };

Answer 1

将名为backdropClass的属性添加到$uibModal.open()方法并提供类名

backdropClass：＆＃39; newClass＆＃39;

backdropClass（Type：string） - 要添加到模态背景模板的其他CSS类。

$rootScope.modalInstance = $uibModal.open({
  templateUrl: templUrl,
  controller: OpenLoginWizardCtrl,
  backdrop: 'static',    
  keyboard: false,
  backdropClass: 'newClass'
});

将此Css提供给该课程，

.newClass
{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    filter: url("https://gist.githubusercontent.com/amitabhaghosh197/b7865b409e835b5a43b5/raw/1a255b551091924971e7dee8935fd38a7fdf7311/blur".svg#blur);
}

因此，上面的类被添加为后台，CSS用于添加BLUR effet。

Answer 2

也许有人知道更正确的解决方案。但我找到了自己的解决方案。

(function () {
    'use strict';

    angular
        .module('app.modal.window.open.service', [])
        .factory('$modalWindowService', $modalWindowService);

    $modalWindowService.inject = ["$http", "$uibModal", "$compile"];

    function $modalWindowService($http, $uibModal, $compile) {

        var modalInstance;

        return {
            openModal: function (urn, id, templateId, controller) {
                $http({
                    method: 'GET',
                    url: urn
                }).success(function (data, $scope) {
                    $("#" + id).append($compile(data)($scope));
                    modalInstance = $uibModal.open({
                        templateUrl: templateId,
                        controller: controller,
                        backdrop: 'static',
                        keyboard: false
                    });
                    return;
                }).error(function () {
                    alert("error");
                    return null;
                });
                document.getElementById('main').classList.add("blur");
            },
            closeModal: function (templateId, controller) {
                if (modalInstance !== undefined) {
                    modalInstance.close({
                        templateUrl: templateId,
                        controller: controller
                    });
                }
                document.getElementById('main').classList.remove("blur");
            }
        }
     }
})();

享受它：）

角度模态窗口

2 个答案: