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>

Rafał Kopczyński · Accepted Answer · 2018-03-13 10:49:13Z

0

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.

answered Mar 13, 2018 at 10:49

Rafał Kopczyński

4834 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicolas Durant · Accepted Answer · 2018-03-13 10:52:08Z

0

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

answered Mar 13, 2018 at 10:52

Nicolas Durant

4654 silver badges11 bronze badges

1 Comment

Amal Over a year ago

Am a beginner and can you explain this in detail. Am trying to fix only this issue and all of the above code in the question was not written by me.

Collectives™ on Stack Overflow

Typescript angular popup with disabled background

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related