Sign in

IView: the style is added to the body when opening modal, but not removed when closing modal

G_Cesar edited in Sat, 20 Aug 2022

In the Vue project, iviewiew is used. When opening the modal pop-up window, the style of "padding right: 15px; overflow: hidden;" is added to the body to prevent the page from scrolling when opening the pop-up window. However, when closing the modal pop-up window, this style is not removed, which makes the page with scrollbar unable to scroll

There is a scrollable property, but after configuration, when the modal pop-up window is opened, the page can also scroll. I still don't want to scroll the page when the pop-up window is opened

Do you have any public solutions?

3 Replies
commented on Sat, 20 Aug 2022

I haven't dealt with it , When modal is off , This style is automatically deleted



commented on Sat, 20 Aug 2022

Using the on visible change event, add a hidden class to the body when it is true, and remove the class when it is false

.hidden {
    padding-right: 15px;
    overflow: hidden;
commented on Sat, 20 Aug 2022

There are two ways: A. by controlling the scrollable attribute, the default is false, that is, the page does not scroll and does not need to be set; B. manually modify the body style through the event on visible change;

lock This question has been locked and the reply function has been disabled.