I have created a web part in react js which contains a Microsoft office UI fabric control "Modal" and it pop outs on a button click. This feature works fine on my local workbench but whenever I deployed it as an app on sharepoint online and add as a web part in modern view page. Things happen something like described in the below images:
Instead of coming infront of the page it opens in the area allocated to the webpart. However, after further analysis, I come to know that sharepoint add this whole webpart into an iframe and set its height according to the height of the webpart section and same goes with the Microsoft UI fabric panel.
I want to know that is there a way that I can make modal or panel work as desired when deployed as a webpart in modern view SharePoint. However, it works when I deployed it as an extension (but that isn't my business requirement).