Unable to open modal or panel when deployed as a webpart in Sharepoint online 2013 Modern view page

[zainkhan]

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).

[#2]

@zainkhan - the answer comes very late, but the issue you describe frustrated me over the last days, and I hope I can spare someone the grief. 

The problem you actually have, is caused by the fact you are running the webparts in domain isolation mode - hence the whole IFRAME stuff. 

Disabling this is as simple as going to: /config/package-solution.json and modifying isDomainIsolated to false. 

The tricky part - and what made me climb all the office walls here - was that even after changing the property, repacking and redeploying the solution to the app catalog - I was still getting the iframes. 

Turns out (yeah, i know - i am stupid, took me one day to notice this) you need to fully remove the solution and redeploy it to the app catalog. Only then will it stop running in domain isolated mode.