Tag Archives: ModalForm Modal

Solution to page scroll bar failure caused by opening secondary spring frame in Ant Design modal form

Ant Design modal form encountered the problem of page scroll bar failure after opening the secondary pop-up box and closing the two pop-up boxes.

Reason:
when the modal form pop-up box is opened, it will add style = "width: Calc (100% - 15px) to the body label; overflow: hidden;” inline style to hide the scroll bar of the page. When closed, this style will be cleared to restore the scroll bar. Open a secondary modal form pop-up box in the modal form pop-up box. After closing the two pop-up boxes, there will be a problem that the style on the body label is not cleaned up, resulting in the problem that the page scroll bar is not restored.

The solution is as follows:
after the first level cartridge modal form is closed, clean up the style added to the body. The specific code is as follows:

<ModalForm
     modalProps={{
         afterClose: () => {
             if (document.getElementsByTagName('body')[0].hasAttribute('style')) {
                 document.getElementsByTagName('body')[0].removeAttribute('style');
             }
         },
     }}>
</ModalForm>