fix(module:modal): mask is not set with the nzZindex property (#6294)

close #6288
NG-ZORRO · Dec 31, 2020 · 54d294a · 54d294a
1 parent a9a6bee
commit 54d294a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/components/modal/modal-container.ts b/components/modal/modal-container.ts
@@ -10,7 +10,7 @@ import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } fr
 import { ChangeDetectorRef, ComponentRef, Directive, ElementRef, EmbeddedViewRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
-import { getElementOffset } from 'ng-zorro-antd/core/util';
+import { getElementOffset, isNotNil } from 'ng-zorro-antd/core/util';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FADE_CLASS_NAME_MAP, MODAL_MASK_CLASS_NAME, NZ_CONFIG_MODULE_NAME, ZOOM_CLASS_NAME_MAP } from './modal-config';
@@ -110,7 +110,7 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD
       throwNzModalContentAlreadyAttachedError();
     }
     this.savePreviouslyFocusedElement();
-    this.setModalTransformOrigin();
+    this.setZIndexForBackdrop();
     return this.portalOutlet.attachComponentPortal(portal);
   }
 
@@ -119,11 +119,13 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD
       throwNzModalContentAlreadyAttachedError();
     }
     this.savePreviouslyFocusedElement();
+    this.setZIndexForBackdrop();
     return this.portalOutlet.attachTemplatePortal(portal);
   }
 
   attachStringContent(): void {
     this.savePreviouslyFocusedElement();
+    this.setZIndexForBackdrop();
   }
 
   getNativeElement(): HTMLElement {
@@ -244,6 +246,15 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD
     modalElement.classList.remove(ZOOM_CLASS_NAME_MAP.leaveActive);
   }
 
+  private setZIndexForBackdrop(): void {
+    const backdropElement = this.overlayRef.backdropElement;
+    if (backdropElement) {
+      if (isNotNil(this.config.nzZIndex)) {
+        this.render.setStyle(backdropElement, 'z-index', this.config.nzZIndex);
+      }
+    }
+  }
+
   bindBackdropStyle(): void {
     const backdropElement = this.overlayRef.backdropElement;
     if (backdropElement) {
@@ -255,6 +266,8 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD
         this.oldMaskStyle = null;
       }
 
+      this.setZIndexForBackdrop();
+
       if (typeof this.config.nzMaskStyle === 'object' && Object.keys(this.config.nzMaskStyle).length) {
         const styles: { [key: string]: string } = { ...this.config.nzMaskStyle };
         Object.keys(styles).forEach(key => {

diff --git a/components/modal/modal.spec.ts b/components/modal/modal.spec.ts
@@ -552,16 +552,20 @@ describe('NzModal', () => {
     fixture.detectChanges();
 
     const modal = overlayContainerElement.querySelector('nz-modal-container') as HTMLElement;
+    const mask = overlayContainerElement.querySelector('.ant-modal-mask') as HTMLElement;
 
     expect(modal.style.zIndex).toBe('1001');
+    expect(mask.style.zIndex).toBe('1001');
 
+    console.log(mask);
     modalRef.updateConfig({
       nzZIndex: 1100
     });
     fixture.detectChanges();
     flushMicrotasks();
 
     expect(modal.style.zIndex).toBe('1100');
+    expect(mask.style.zIndex).toBe('1100');
 
     modalRef.close();
     fixture.detectChanges();