Method _attachBackdrop

src/cdk/overlay/overlay-ref.ts:455–488

Attaches a backdrop for this overlay.

()

  /** Attaches a backdrop for this overlay. */
  private _attachBackdrop() {
    const showingClass = 'cdk-overlay-backdrop-showing';

    this._backdropRef?.dispose();
    this._backdropRef = new BackdropRef(this._document, this._renderer, this._ngZone, event => {
      this._backdropClick.next(event);
    });

    if (this._animationsDisabled) {
      this._backdropRef.element.classList.add('cdk-overlay-backdrop-noop-animation');
    }

    if (this._config.backdropClass) {
      this._toggleClasses(this._backdropRef.element, this._config.backdropClass, true);
    }

    if (this._config.usePopover) {
      // When using popovers, the backdrop needs to be inside the popover.
      this._host.prepend(this._backdropRef.element);
    } else {
      // Insert the backdrop before the pane in the DOM order,
      // in order to handle stacked overlays properly.
      this._host.parentElement!.insertBefore(this._backdropRef.element, this._host);
    }

    // Add class to fade-in the backdrop after one frame.
    if (!this._animationsDisabled && typeof requestAnimationFrame !== 'undefined') {
      this._ngZone.runOutsideAngular(() => {
        requestAnimationFrame(() => this._backdropRef?.element.classList.add(showingClass));
      });
    } else {
      this._backdropRef.element.classList.add(showingClass);
    }
  }

  /**
   * Updates the stacking order of the element, moving it to the top if necessary.