3 Answer(s)

• 

  -1

  AI-Bot created an hour ago

  Support Team ABP Agent

  • Issue 1 (z-index / MatDialog overlay): abp-modal is implemented on top of ng-bootstrap’s NgbModal, which appends ngb-modal-window / ngb-modal-backdrop to document.body. When your app (or theme) sets .cdk-overlay-container { z-index: 10000 !important; } and ng-bootstrap modal/backdrop stays at a lower z-index (e.g., 9999), the modal will render behind the CDK overlay stack.
    Supported ABP-side workaround (no need to fork ABP): pass windowClass / backdropClass via the [options] input (ABP spreads options() into NgbModal.open(...)), then override z-index globally.

  <abp-modal
      [(visible)]="openViewDocument"
      [options]="{
        windowClass: 'abp-above-cdk',
        backdropClass: 'abp-above-cdk-backdrop'
      }"
    >
      <ng-template #abpBody>...</ng-template>
    </abp-modal>
  

  Put the CSS in a global stylesheet (recommended), so you don’t need ::ng-deep:

  ngb-modal-window.abp-above-cdk { z-index: 10001 !important; }
    ngb-modal-backdrop.abp-above-cdk-backdrop { z-index: 10001 !important; }
  

  Notes:

  • Using a component-scoped stylesheet forces you into ::ng-deep because the modal elements are not inside the component’s DOM tree (they’re appended to body).

  • Your current CSS values confirm the root cause: 9999 < 10000, so it will always lose against .cdk-overlay-container.

  • Issue 2 (contentChild('abpBody') + *ngIf on <ng-template>): In ABP 10.6, abp-modal uses Angular’s signal-based contentChild('abpBody'). That query will not reliably find a template reference that is structurally wrapped (like <ng-template *ngIf ... #abpBody>), because *ngIf on an <ng-template> creates an additional outer template layer.
    Fix in application code: keep exactly one projected <ng-template #abpBody> and move conditional logic inside it (as you already did):

  <abp-modal [(visible)]="showModal">
      <ng-template #abpBody>
        <app-edit-form *ngIf="isEditMode"></app-edit-form>
        <app-view-only *ngIf="!isEditMode"></app-view-only>
      </ng-template>
    </abp-modal>
  

  This pattern aligns with how ABP’s modal is documented/used (single #abpBody template projected into the component).

  • About your requested ABP changes (what is verifiable from sources):
    • From the ABP Angular modal docs, the modal is expected to be used by projecting #abpHeader/#abpBody/#abpFooter templates (single templates) into <abp-modal>. Your “two #abpBody templates toggled by *ngIf” is not a documented usage pattern, and it becomes fragile with signal-based content queries.
    • There is no verified, official ABP documentation (in the retrieved sources) that mentions a zIndex input, container option, or a migration note specifically about contentChild() + *ngIf on <ng-template #abpBody>.

  Sources (verified)

  • https://abp.io/docs/latest/framework/ui/angular/modal
  • https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
  • https://github.com/abpframework/abp/tree/dev/npm/ng-packs/packages/theme-shared

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  pradeep.pradyumna created an hour ago

  [AI-Bot] said:

  • Issue 1 (z-index / MatDialog overlay): abp-modal is implemented on top of ng-bootstrap’s NgbModal, which appends ngb-modal-window / ngb-modal-backdrop to document.body. When your app (or theme) sets .cdk-overlay-container { z-index: 10000 !important; } and ng-bootstrap modal/backdrop stays at a lower z-index (e.g., 9999), the modal will render behind the CDK overlay stack.
    Supported ABP-side workaround (no need to fork ABP): pass windowClass / backdropClass via the [options] input (ABP spreads options() into NgbModal.open(...)), then override z-index globally.

  <abp-modal 
      [(visible)]="openViewDocument" 
      [options]="{ 
        windowClass: 'abp-above-cdk', 
        backdropClass: 'abp-above-cdk-backdrop' 
      }" 
    > 
      <ng-template #abpBody>...</ng-template> 
    </abp-modal> 
  

  Put the CSS in a global stylesheet (recommended), so you don’t need ::ng-deep:

  ngb-modal-window.abp-above-cdk { z-index: 10001 !important; } 
    ngb-modal-backdrop.abp-above-cdk-backdrop { z-index: 10001 !important; } 
  

  Notes:

  • Using a component-scoped stylesheet forces you into ::ng-deep because the modal elements are not inside the component’s DOM tree (they’re appended to body).
  • Your current CSS values confirm the root cause: 9999 < 10000, so it will always lose against .cdk-overlay-container. >
  • Issue 2 (contentChild('abpBody') + *ngIf on <ng-template>): In ABP 10.6, abp-modal uses Angular’s signal-based contentChild('abpBody'). That query will not reliably find a template reference that is structurally wrapped (like <ng-template *ngIf ... #abpBody>), because *ngIf on an <ng-template> creates an additional outer template layer.
    Fix in application code: keep exactly one projected <ng-template #abpBody> and move conditional logic inside it (as you already did):

  <abp-modal [(visible)]="showModal"> 
      <ng-template #abpBody> 
        <app-edit-form *ngIf="isEditMode"></app-edit-form> 
        <app-view-only *ngIf="!isEditMode"></app-view-only> 
      </ng-template> 
    </abp-modal> 
  

  This pattern aligns with how ABP’s modal is documented/used (single #abpBody template projected into the component).

  • About your requested ABP changes (what is verifiable from sources):
    • From the ABP Angular modal docs, the modal is expected to be used by projecting #abpHeader/#abpBody/#abpFooter templates (single templates) into <abp-modal>. Your “two #abpBody templates toggled by *ngIf” is not a documented usage pattern, and it becomes fragile with signal-based content queries.
    • There is no verified, official ABP documentation (in the retrieved sources) that mentions a zIndex input, container option, or a migration note specifically about contentChild() + *ngIf on <ng-template #abpBody>.

  Sources (verified)

  • https://abp.io/docs/latest/framework/ui/angular/modal
  • https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
  • https://github.com/abpframework/abp/tree/dev/npm/ng-packs/packages/theme-shared

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  No AI response, please!

  I applied the changes, I still see the abp-modal appears begin the custom pop-up. you can refer to the screenshot below

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 34 minutes ago

  Support Team Fullstack Developer

  Hi,

  Angular CDK 22 opens MatDialog in the browser's top layer by default (it uses the native popover API). Elements outside the top layer always stay behind it, so abp-modal can't get above the dialog with z-index alone, even with 10001.

  You can turn this off in your root providers:

  import { OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      // ...your existing providers
      { provide: OVERLAY_DEFAULT_CONFIG, useValue: { usePopover: false } },
    ],
  };
  

  This puts all CDK overlays back to normal z-index stacking.

  After that, your windowClass / backdropClass workaround works. You don't need ::ng-deep, just put the CSS in the global styles.scss. Use a more specific selector than the rules in dark.css. Otherwise the result depends on which file loads last.

  <abp-modal
    [(visible)]="openViewDocument"
    [options]="{ windowClass: 'above-cdk-overlay', backdropClass: 'above-cdk-overlay-backdrop' }"
  >
    ...
  </abp-modal>
  

  body ngb-modal-backdrop.modal-backdrop.above-cdk-overlay-backdrop {
    z-index: 10001 !important;
  }
  
  body ngb-modal-window.modal.above-cdk-overlay {
    z-index: 10002 !important;
  }
  

  If the delete confirmation comes from ABP's ConfirmationService, it isn't an ng-bootstrap modal, so these classes don't apply to it. Add this to the global styles as well:

  body .confirmation {
    z-index: 10003 !important;
  }
  

  The [options] input is typed as NgbModalOptions and is passed to NgbModal.open() as is, so container and the other ng-bootstrap options work too: https://abp.io/docs/latest/framework/ui/angular/modal#options

  About abpBody: abp-modal already used the signal contentChild('abpBody') in 8.3.0, the same query as in 10.6. Your original markup with two <ng-template *ngIf="..." #abpBody> also renders the right body with ABP 10.6.0 and Angular 22.1, so the empty body comes from something else on that page. Your single #abpBody version is fine to keep. If you want us to look into the original one, please share a small project that reproduces it.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel