Angular Modal window

Question

I've got my modal window in Angular JS. Could some body answer me how to add blur effect to body when I open this modal window.

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

Maybe someone knows a more correct solution to this problem. But I found a solution for myself.

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

enjoy it :)

Answer 2

Add a property called, backdropClass to $uibModal.open() method and give a class name

backdropClass: 'newClass'

backdropClass (Type: string) - Additional CSS class(es) to be added to a modal backdrop template.

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

Give this Css to that class,

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

So, the above class is added as a back-drop and the CSS is for adding BLUR effet to it.