MDBModal turning off main page scroll if exited early

Topic: MDBModal turning off main page scroll if exited early

guisup priority asked 1 year ago

Expected behavior The page should continue to have a scrollable view on the main page.

Actual behavior the "modal-open" class and styles remain when non-expectedly exiting the modal. This occurs when we enter the modal and go back one page in the router, the modal component is gone but the class and styles remain, as well as when we have a v-if on the modal and hide it without letting it close fully.

What solutions could you propose to help allow the page to be scrollable even if the modal is exited unexpectedly?

Resources (screenshots, code snippets etc.)

Modal opens and sets the styles on the body of the page enter image description here

Add comment

guisup priority answered 1 year ago

0 0 Best answer

Solution found, added in the router script before every page load:

router.beforeEach(async (to) => {
    // Removes modal-open class and its styles if it exists
    if (document.body.classList.contains('modal-open')) {
        document.body.style.overflowY = null
        document.body.style.paddingRight = null
        document.body.classList.remove('modal-open')
    }
    NProgress.start()
});

Add comment

Bartosz Cylwik staff answered 1 year ago