How to make the first level pop-up window full screen, click a button, can display the second level pop-up window

Question

<nz-modal>
  <div id="ath-modal-id">
    <div class="full-screen-icon">
      <svg
        class="iconfont icon"
        aria-hidden="true"
        (click)="fullScreenModel()"
      >
        <use xlink:href="#iconquanping"></use>
      </svg>
    </div>
    <button (click)="openOrderDetail()"></button>
  </div>
</nz-modal>

/** fullscreen */
fullScreenModel(): void {
  const element = document.getElementById('ath-modal-id');
  if (element.requestFullscreen) {
    element.requestFullscreen().then((): void => {
    });
  }
  this.isFullScreen = true;
}

openOrderDetail(){
  this.modalService.create(
    {
      nzTitle: 'the second modal',
      nzContent: OrderDetailModalComponent
    }
  );
}

In full screen mode, when I click on the openOrderDetail method, the secondary order details pop-up appears below the full screen

the secondary order details pop-up appears above the full screen