Topic: Problem of scrolling at modal window switc
Hello, I have two modals on my page. One to login and one to register.
In the login modal there is a button "Not registered yet? Register" button that closes the login modal and opens the registration modal.
Same thing, in the registration modal, I have a link "Already registered? Log in" which closes the registration modal and opens the connection modal.
When I open directly the connection or registration modal, the scrolling of the page makes the modal scroll, it's perfect. My HTML parser (Firefox) does put a scrollable tag next to <div class="modal fade show" [...] > and an overflow tag next to <div class="modal-content">.
On the other hand, when I switch from one modal window to another, the scrolling remains attached to the page behind.
I tried to switch modals with HTML attributes or in JavaScript using the toggle() or hide()/show() methods or even by simulating the click on the modal's open button. But nothing helps, the bug persists.
I also compared the HTML rendering of the modal window with and without the bug. Nothing differs.
Do you have an idea?
When the modal is opened, the scrollbar of the page is hidden and shown again when closed.
In your case, I assume that you are not waiting for the first modal to close and you open the next one. This means that when the second modal opens, the first one has not closed yet (the animation is not over yet). And only after it has completely disappeared, the scrollbar is added again.
You should wait for the first modal to close and then open the next one. Look at this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2868106#js-tab-view
gdw96 free commented 3 years ago
Indeed, I did not try to wait for the closing event. Thank you for your answer.
It works perfectly
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: Yes
- Provided link: No