How to show Dialog in full screen with an overlay when Dialog embedded inside Iframe

Main App: Represent to the sidebar (white color in the background)

I frame App: Represent to grey background color

Iframe app is embedded inside the main app. now when the dialog is shown, I want to prevent the main app click event.

the conclusion is when the dialog is visible, I want to prevent another action click, if we click on the sidebar menu home/user/dashboard/test, Dialog is automatically closed. It should not be close and prevent outside click.

I want to achieve with CSS only if it's possible.

I read and tried many medium blogs, articles, dev community, GitHub issues but did not get an appropriate answer