I am developing/designing an webapp. It has an employee profile page that displays employee picture, some key information like name, designation and contact details in bigger fonts and below that there are lot of details about the employee seggregated in multiple tabs. In each tab there is an edit icon. If the user clicks on them a modal/popup opens up with a pre-filled form allowing the user to edit the values. I have taken the following steps to make it user friendly:
There is a visible close icon on the title bar of the popup
The user can press the Esc key to get rid of the popup
The user can click outside the dialog to get rid of the popup
When the popup opens, the scrolling of the base window is disabled
If the user makes some changes and inadvertently clicks outside the modal or move away without saving, the app will show dialog warning about unsaved messages
The form fields are divided into sections and are in single column
While reading about UX design in the internet I saw that many people frown about dialogs/modals especially when they have scrollBle forms. They also recommend forms with all fields in single column. Hence I think, if popup is the good solution to meet this one column requirement as it looks good and a lot portion of the page don't remain unused.
Please advise, if the use of popup is the right in this design. Here are some images that will give a rough idea. Here is the base screen. At the right margin, there is an edit button.
Here is the modal form with all fields in single column. The background is darker but the user can still see the base page. The modal form is scrollable and it has all the controls in one single column: