如何使屏幕透明

Question

我正在尝试将旋转器添加到我的应用程序时，当show（）单击时，当前页面才能继续透明视图，只有我的旋转器才能突出显示

<button (click)="show()">show</button>
<button (click)="hide()">hide</button>
<div class="container" *ngIf="isBusy">
    <div class="backdrop"></div>
    <ion-spinner name="bubbles" color="primary"></ion-spinner>
</div>

目前，我能够显示和隐藏旋转器，我需要的是显示旋转器时的所有内容应移动到透明模式，并且只能显示旋转器，而不是显示其他内容

Answer 1

假设您的内容在某些包装器div中。然后，在繁忙的状态下，您需要添加到此div的一些类中，该类别关闭指针事件并设置较低的不透明度

<div [class.nonclickable]="isBusy">
    <!-- content -->
</div>
<div class="container" *ngIf="isBusy">
    <div class="backdrop"></div>
    <ion-spinner name="bubbles" color="primary"></ion-spinner>
</div>

和样式：

.nonclickable {
    opacity: .3;
    pointer-events: none;
    cursor: not-allowed;
}

Answer 2

您可以像这样做

<div *ngIf="!isBusy">
    //content
</div>
<div class="container" *ngIf="isBusy">
    <div class="backdrop"></div>
    <ion-spinner name="bubbles" color="primary"></ion-spinner>
</div>