Typescript angular popup with disabled background

Question

Angular 4 TypeScript, click a button to pop file open dialog

In refrence to the above qa, the pop up opens but the background needs to disbled. How can make the background disabled?

html

 <div class="text-center">
    <div class="btn-toolbar">
        <button type="button" ng-disabled="approval.buttonsDisabled" class="btn btn-success btn-sm" ng-click="approval.approveOrDenySingleItem(dd.id, 'approve')">Accept</button>
        <button type="button" ng-disabled="approval.buttonsDisabled" class="btn btn-warning btn-sm" ng-click="approval.delegateSingleItem(dd.id)">Delegate</button>
        <button type="button" ng-disabled="approval.buttonsDisabled" class="btn btn-danger btn-sm" ng-click="approval.approveOrDenySingleItem(dd.id, 'deny')">Reject</button>
    </div>
 </div>

js

    this.approvalCartService.approvalAction(shoppingCartRequestDTO, action).then((data) => {
        // this.$log.info('data: '+JSON.stringify(data));

        let options: ng.ui.bootstrap.IModalSettings = {};

        if(data.success) {

            if(action === 'approve') {
                options = {
                    templateUrl: 'requestsentsuccess.html'
                };
            }
            if(action === 'deny') {
                options = {
                    templateUrl: 'rejectsentsuccess.html'
                };
            }

            this.modal.open(options).result.then(() => {
                ....
            });

        } else {
            options = {
                templateUrl: 'requesterror.html',
                controller: ApprovalDetailController.controllerId + ' as modal',
                resolve: {
                    data: () =>  data
                }
            };

            this.modal.open(options).result.then();
        }

    }).finally(() => {
        ...
    });

}

Code for the popup

<script type="text/ng-template" id="rejectsentsuccess.html">
<div class="modal-header">
    <h3 class="modal-title">Success</h3>
</div>
<div class="modal-body">
    Rejection successfully sent.
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="$close()">OK</button>
</div>

Answer 1

I think, the easiest way to achieve this is to create some top-level component which could occupy whole view (100% width and height). Place it under modal and somehow trigger (via some service for example).

Read about z-index - it basically gives u opportunity to manage "level" in space where something appear.

Answer 2

I think the easiest you can do: you lay a div between your content and the popup that blocks the clicks or react on clicks (e.g. close the popup again).