Is there a way to deactivate the main background container that holds a grid with data? Within this grid, users have options for sorting and exporting the data into formats like csv/pdf. Additionally, there is a filter button on the grid that, when clicked (via ng-click= xyz();), opens a filter overlay. This overlay is a child container div inside the parent div. The goal is to disable the functionality of the parent grid when the filter overlay div is active, preventing sorting, exporting, and any other actions on the parent div.

I would appreciate any assistance or guidance on how to achieve this. My entire project is built in angular js. A demonstration or example with code snippets would be highly beneficial!

In agg.service.js

angular.module('ccar14a.common').factory('ccar14a.common.AggService', [
'ccar14a.common.Config',
'StatusService',
'ccar14a.common.TcnService',
'ccar14a.common.PivotService',
'ccar14a.common.GridConfigService',
'$timeout',
function(Config, StatusService, TcnService, PivotService, GridConfigService, $timeout) {

    var service = { 
            openFilterOverlay: function() {
            console.log("Toggle Filter overlay00");

           var filteroverlay = angular.element(".filter-overlay");

           if(filteroverlay.hasClass('open')) {

               filteroverlay.removeClass('open');
           } else {
               filteroverlay.addClass('open');
           }
            angular.element('.tooltip').hide();
        },
   };

    return service;
   }]);

In index.html

<div class="col-md-12 main-view" ng-controller="ccar14a.common.drillDownController">

<div class="ddt-container">
    <h2>
    <span>
        {{config.title}} v{{config.version}}.
        <a href="" ng-click="getInitialFilter(true)"
                    ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
            {{config.initialTitle}}</a>
        <!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
        <!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
    </span>
    <div class="ddt-links pull-right">
        <a href="" ng-click="about()">
            About</a>
        <a href="" ng-click="help()">
            Help</a>
    </div>
</h2>
</div>

<!--div container for filter overlay starts here-->

<div class="container-fluid ddt-container" ng-controller="ccar14a.common.drillDownController" id="ccar14a">
    <h2 ng-hide="true" class="remove">
    <span>
        {{config.title}} v{{config.version}}.
        <a href="" ng-click="getInitialFilter(true)"
                    ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
            {{config.initialTitle}}</a>
        <!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
        <!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
    </span>
    <div class="ddt-links pull-right">
        <a href="" ng-click="about()">
            About</a>
        <a href="" ng-click="help()">
            Help</a>
    </div>
</h2>


    <div class="ddt-sidebar filter-overlay col-md-2">

        <div class="row">
            <div class="col-md-6">
                <div class="form-group ddt-filter-box-group">
                    <select class="form-control ddt-filter-box-fld" ng-model="savedFilter" ng-change="aggService.submitScenario(filter)">
                        <option value="">My Saved Filters</option>
                    </select>
                </div>
            </div>

            <div class="col-md-6">
                <button type="button" class="filter-close close-filter pull-right" ng-click="aggService.openFilterOverlay()"><i class="glyphicon glyphicon-remove filter-close"></i></button>

            </div>
        </div>

        <!--The code continues having several filter box  -->
 <div class="ddt-content col-xs-12" ng-class="{'col-md-10': !showControlPanel, 'col-xs-12' : !showControlPanel}">
            <div class="ddt-grid" ng-controller="ccar14a.common.AggController" ng-show="config.displaySummaryGrid">
                <ng-include src="'templates/summaryGrid.html' | embedUrl"></ng-include>
</div>

In summaryGrid.html

<div class="grid-header">

<button type="button" class="btn btn-sm ddt-btn-medium pull-left" ng-show="true" ng-click="aggService.openFilterOverlay();">
    <i class="glyphicon glyphicon-filter" tooltip="Open Filter" tooltip-placement="right"></i>
</button>
<!-- Code for other functionalities continues-->
</div>

In styles.css

.filter-overlay {
position: absolute;
left: -500px;
background: #EEE;
transition: 1s;
z-index: 1000;
box-shadow: 5px 5px 10px 3px #aaaaaa;
height: 100%;
min-width:365px;
overflow-y: auto;
 }

.filter-overlay.open {
transition: 1s;
left: 0;
}

.filter-overlay .row {
margin-left: 0;
margin-right: 0;
margin-top: 8px;
margin-botton: 12px;}

.container-fluid {
background-color: #F0F3F6;
height: 100%;
padding: 18px;}

.container-fluid .row{
margin-left: 0;
margin-right: 0;}

.ddt-content {
padding-left: 0;
padding-right: 0;
background-color: white;}

.tab-content > .tab-pane {
display: none;}

.tab-content > .active {
display: block;}