On Modal open, unable to clearly display content in the background and unable to display something at the level of the open modal

[Ruturaj-Panditrao]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

We have an ix modal (popup). When the modal opens, it rises above the background, which then becomes blurred. We want to display notifications or content either behind the modal or at the same level (side by side or on the same plane). However, we’re unable to do this because once the modal opens, all other content changes occur only in the blurred background, leaving just the modal on top. As a result, any changes on the screen are visible only in the blurred background, and we can’t display content clearly on the same plane as the modal or clearly in the background.
So, the issues are when modal opens:

1. blurred background
2. display something along the level of the modal is not possible

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

2.2.0

Code to produce this issue.

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { ModalService } from '@siemens/ix-angular';

@Component({
  selector: 'app-example',
  template: `
    <ix-button (click)="openModal()">Show modal</ix-button>

    <ng-template #customModal let-modal>
      <ix-modal>
        <ix-modal-header> Message headline </ix-modal-header>
        <ix-modal-content
          >Message text lorem ipsum: {{ modal.data }}</ix-modal-content
        >
        <ix-modal-footer>
          <ix-button
            outline
            class="dismiss-modal"
            (click)="modal.dismiss('dismiss')"
          >
            Cancel
          </ix-button>
          <ix-button class="close-modal" (click)="modal.close('okay')">
            OK
          </ix-button>
        </ix-modal-footer>
      </ix-modal>
    </ng-template>
  `,
})
export default class Modal {
  @ViewChild('customModal', { read: TemplateRef })
  customModalRef!: TemplateRef<any>;

  constructor(private readonly modalService: ModalService) {}

  async openModal() {
    const instance = await this.modalService.open({
      content: this.customModalRef,
      data: 'Some data',
    });

    instance.onClose.on((a) => {
      console.log(a);
    });

    instance.htmlElement.addEventListener(
      'keydown',
      (keyboardEvent: KeyboardEvent) => {
        console.log(keyboardEvent.key);
      }
    );
  }
}