Hide the interactions on background when primeng dialog model is open

[Sakthikrishna13-10]

This is the structure of my components

entryedit- create entry page
entryupdate - edit the entry page
entry component - display the created entry page

In entrypage.component.ts - i have edit icon - if i click on edit icon, i am managing function like

public EditEntryPage(): void {
if (!this.ref) {
this.ref = this.dialogService.open(EntryupdateComponent, {
contentStyle: { "overflow": "visible" ,"height" : "800px"},
baseZIndex: 10000,
data: null,
modal : true
});
this.ref.onClose.subscribe((hasUpdate: any) => {
console.log("hasUpdate",hasUpdate);
if(hasUpdate == "updated"){
this.ngOnInit();
}
this.ref = undefined;
});
}
}
}

And in entry update.component. ts
import { DynamicDialogRef,DynamicDialogConfig } from 'primeng/dynamicdialog';

constructor(
public ref: DynamicDialogRef,
private cdRef: ChangeDetectorRef,
public config: DynamicDialogConfig,
private readonly confirmationService: ConfirmationService,
private router: Router,
) {
config.dismissableMask = true;
config.closable = false;
config.closeOnEscape = true;
config.modal = true;
config.baseZIndex = 10000;
}

And in entry.update.component.html, For ex I am having content like
,,.....(Dialog opens)........... in some div tags

once I click on edit icon on entry page component, it opens the dialog of this entry update with this dialog opens content within the dialog.

But problem is, I can access the background. Background interactions should not be there if we use modal as true.. I mean i have a sidebar in bakground. I can click on sidebars if my dialog is open

Is there any problem in my code?

And below is my primeNG version and Angular version
"@angular/cli": "~13.2.2",
"@angular/cdk": "^13.0.0",
"primeng": "^12.2.2",

[cetincakiroglu]

Hi,

Please provide a Stackblitz example so we can identify the issue, sharing code like this doesn't help any.