Question

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

参考上述qa，弹出窗口打开但背景需要降低。如何禁用后台？

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(() => {
        ...
    });

}

弹出窗口的代码

<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

我认为，实现这一目标的最简单方法是创建一些可以占据整个视图（100％宽度和高度）的顶级组件。将它置于模态下并以某种方式触发（例如通过某些服务）。

了解z-index - 它基本上让你有机会在出现某些东西的空间中管理“等级”。

Answer 2

我认为您最简单的做法是：在您的内容和阻止点击或对点击作出反应的弹出窗口之间设置一个div（例如，再次关闭弹出窗口）。

打字稿角弹出窗口与禁用的背景

2 个答案: