当子容器div处于活动状态时，如何禁用父背景div？

Question

I want to disable a parent background div which contains grid with data . On the grid there are options like sorting and exporting the data into csv/pdf . Also, on this grid there is a filter button, on click of which(via ng-click= xyz(); ) a filter overlay comes. This is a child container div inside the parent div . I want to disable the parent grid div when this filter overlay div opens ie, disable the sorting and export and any other functionalities on the parent div .

Any help form anyone? My entire project is in angular js . An example with a demo will be great!

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

Answer 1

If you disable the parent element then obviously the children elements will also be disabled. Instead of making them parent and children you can place those two divs as siblings and hide them individually depending on the visibility of the element.