Topic: Modal and &scrollTo in Form-action
Expected behavior in my form i have a submit button for save data. The result should be shown as a modal as a message in the next opening of the page. Bevor i have the script:
$(window).on('load', function() {
$('#ergebnis').modal('show');
});
and the code:
<div class="modal fade right"
id="ergebnis"
tabindex="-1"
aria-labelledby="exampleSideModal2"
aria-hidden="true">
<div class="modal-dialog modal-side modal-bottom-right">
The modal works fine. The URL for the page includes in the form action [&scrollto = idguta2] Actual behavior With the modal dialog the scrollTo don't work, without modal all is ok. Even with an anchor at the end of the URL it doesn't work. The following attempt as a script does not work either:
document.addEventListener("DOMContentLoaded", () => {
const params = new URLSearchParams(window.location.search);
const scrollTo = params.get('scrollTo');
if (scrollTo) {
const element = document.getElementById(scrollTo);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
});
Do you have a solution for modal AND &scrollTo?
Resources (screenshots, code snippets etc.)
You should trigger scrollTo either before the modal opens or after it finishes closing (you can use events to detect when that happens). The modal disables scrolling — which is the intended behaviour — so you can use both features, just not while the modal is open.
Joachim Kumpa pro premium priority commented 3 days ago
Yes, its right, i must use a trigger after addEventListener I do this with a timeout for example : window.onload = function() { setTimeout(function() { $('#ergebnis').modal('show'); }, 200); };
Kamila Pieńkowska staff commented 3 days ago
I meant that you could listen to the hidden.mdb.modal event, which is triggered when the modal finishes hiding, and then run the scroll.
Joachim Kumpa pro premium priority commented 3 days ago
hidden.mdb.modal event ? i can't anything about that. Please help me.
Kamila Pieńkowska staff commented 2 days ago
Here is info about events available for the modal component: https://mdbootstrap.com/docs/standard/components/modal/#api-section-events
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 9.0.0
- Device: Laptop
- Browser: Firefox
- OS: win 11
- Provided sample code: No
- Provided link: No