Angular add div, чтобы запретить фоновые клики

Question

Каков наилучший способ создания полноэкранного div между моим контентом и моим всплывающим окном?

Моя проблема в том, что у меня есть страница, но когда пользователь впервые входит в систему, я хочу добавитьруководство, выделяющее некоторые компоненты и показывающее информационное окно, и это сделано и работает, однако пользователь все еще может нажимать на ссылки на странице, и я не хочу, чтобы это произошло до того, как он закончит руководство, поэтому я решил добавитьполноэкранный div на странице.

После добавления div с помощью следующего CSS:

.backgroundDiv {
  display: block;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  text-rendering: optimizeLegibility;
  top: 0;
  transition: opacity .5s ease-in-out;
  width: 100%;
  z-index: 100000;
  overflow-x: auto;
}

Это работает, но когда мое руководство выделяет какой-то компонент, который не виден, он делает: element.nativeElement.scrollIntoView({block: 'end', behavior: 'smooth'});

Но прокрутка применяется к фоновому div вместо моей главной страницы, и это нарушает функцию.

Мой всплывающий HTML-код похож на:

<ng-container>
  <div *ngIf="display" class="backgroundDiv">
    <ng-container *ngIf="display">
     (...) // Popup HTML
    </ng-container>
  </div>
</ng-container>

Редактировать: Есть ли способ узнать фактический размер моей страницы? Все, что я мог найти, просто дает мне экран пользователя на макс. Если бы я мог получить фактическую высоту, я мог бы использовать динамическую высоту для моего фона div.