>

나는 앵귤러가있는 웹 사이트를 만들기 위해 primeng 및 ng-bootstrap 구성 요소를 사용하고 있습니다.

정보를 캡처하기 위해 ng-bootstrap 모달 내에 양식을 사용합니다. 해당 모달의 "저장"버튼을 클릭하면 프라임 확인 확인 대화 상자가 나타납니다. 문제는 모달 뒤에 나타납니다.

어떻게 고칠 수 있습니까?

여기 내 HTML이 있습니다 :

<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" width="425" appendTo="body"></p-confirmDialog>
<ng-template #modalFormOrder let-c="close" let-d="dismiss" id="modalFormOrder">
    <div class="modal-header">
        ...
    </div>
    <div class="modal-body">
        ...
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-light" (click)="c('Close click')">Close</button>
        <button type="button" class="btn m-btn--pill m-btn--air btn-success" (click)="SaveEditLoadOrder()">Save</button>
    </div>
</ng-template>

  • 답변 # 1

    두 대화 상자가 모두 z-index CSS 속성을 사용한다고 확신합니다. 먼저 표시하려는 요소의 숫자가 더 큰 z-index CSS 속성을 재정의하십시오 (예 : z-index : 1001;

    ).

    PrimeNG의 CSS를 재정의하려면 /src/styles.css에 작성하는 것이 좋습니다. 다음 예는 달력 CSS를 재정의합니다

    .ui-calendar {
      width: 100%;
      height: 100%;
    }
    
    

    PrimeNG 문서에서 각 구성 요소에 대해 재정의 할 CSS 클래스를 찾을 수 있습니다

  • 이전 PHP는 배열에서 항목을 제거 할 수 없습니다
  • 다음 javascript - 체크 박스 클래스 체크 해제