Edit in JSFiddle

<div ng-app="TestApp">
    <div ng-controller="ExampleController">
        <div class="MaskLayer"
            ng-class="{isClosed : !masked}">
            
            <div class="MaskLayer-Content">
                <p>
                    Yo!
                </p>
                
                <button ng-click="close();">
                    Hide Mask
                </button>  
            </div> 
        </div>
        
        <p>
            My content is masked: {{masked}}
        </p>
        <button ng-click="open();">Show Mask</button>
    </div>
</div>

.MaskLayer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    
    width: 100%;
    height: 100%;
    
    background: rgba(170, 0, 255, .5);
    -webkit-transition: opacity linear 0.25s;
    transition: opacity linear 0.25s;
    pointer-events: auto;
}
.MaskLayer.isClosed {
    opacity: 0;
    pointer-events: none;
}

.MaskLayer-Content {
    position: absolute;
    top: 50%;
    left: 50%;
    background: white;
    
    padding: 10px;
    
    margin: -55px 0 0 -55px;
    
    height: 100px;
    width: 100px;
    
    text-align: center
}

angular.module('TestApp', [])
    .controller('ExampleController', function ($scope) {
        $scope.masked = false;
        
        $scope.close = function () {
            $scope.masked = false;
        };
        
        $scope.open = function () {
            $scope.masked = true;
        };
    });