Question

我在 Angular 中使用了 NativeScript ，我试图使用自定义模式将模式显示到页面的一半，背景需要透明。我已经对以模态创建的组件使用绝对位置。但它不起作用。有人可以提出一个主意吗？提前致谢。我在下面附加了我的代码：

SCSS代码：

.cv-modal {
  animation-name: fadein;
  animation-duration: 0.2s;
  z-index: 9999;

  &-bottom {
    background-color: rgba(0,0,0,0.4);

    .modal-container {
      border-top-right-radius: 25;
      border-top-left-radius: 25;
      width: 100%;
      background-color: #fff;
      animation-name: slideInUp;
      animation-duration: 0.3s;
    }
  }

}

@keyframes slideInUp {
  from {
    transform: translate(0, 3000);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

app.component.html

<FlexboxLayout class="my-events-container" flexDirection="column" style="position: relative">
        <ns-modal *ngIf="showModal" [position]="'bottom'" (close)="showModal = false">
            <ns-event-attendance></ns-event-attendance>
        </ns-modal>
        <StackLayout>
            <ListView class="cv-list" [items]="data" (itemTap)="showModal = true">
                <ng-template let-item="item" let-i="index">
                    <FlexboxLayout class="cv-list-item" alignItems="center">
                        <StackLayout class="list-item-l today">
                            <Label class="list-item-number" text="5"></Label>
                            <Label class="list-item-text" text="Nov"></Label>
                        </StackLayout>
                        <StackLayout class="list-item-c">
                            <FlexboxLayout flexDirection="column">
                                <Label class="list-item-heading" [text]='item.name'></Label>
                                <Label class="list-item-sub" [text]='item.location'></Label>
                                <Label class="list-item-last" [text]='item.location'></Label>
                            </FlexboxLayout>
                        </StackLayout>
                        <FlexboxLayout class="list-item-r">
                            <Label class="list-item-dot"></Label>
                        </FlexboxLayout>
                    </FlexboxLayout>
                </ng-template>
            </ListView>
        </StackLayout>
    </FlexboxLayout>

modal.component.html

<AbsoluteLayout class="cv-modal cv-modal-bottom" style="position: absolute" >
    <ng-container *ngIf="position === 'bottom'">
        <FlexboxLayout alignItems="flex-end" width="100%" height="100%">
            <StackLayout (tap)="closeModal()" class="modal-container">
                <FlexboxLayout  justifyContent="center" padding="20">
                    <StackLayout  width="45" borderRadius="10" height="4" backgroundColor="#a9a9a9"></StackLayout>
                </FlexboxLayout>
                <FlexboxLayout flexDirection="column">
                    <Label class="text-heading" text="testing"></Label>
                    <Label class="list-item-sub" text="xxxx"></Label>
                    <Label class="list-item-last" text="yyyy"></Label>
                </FlexboxLayout>
            </StackLayout>
        </FlexboxLayout>
    </ng-container>
</AbsoluteLayout>

Angular Nativescript自定义模式位置绝对不起作用

0 个答案: