Hello,
I need some help with setting up a modal inside the menu of my mobile and tablet view of my website.
every time I try testing the “open modal” opinion it automatically closes the mobile/tabelt menu drop-down.
is there anything I am doing wrong or is it not at all possible to do?
any help would be appreciated!
I’ve added a gif to explain visually what I’m talking about.
Here is my public share link: LINK
Hi. It looks like the modal pushes away other elements.
If you want to build a modal natively on Webflow., That modal usually has to be wrapped by a div which is fixed position and with an z-index value, and the modal exists inside of it.
You have to share a read-only for others to know what’s going on.
Apologies! I though I did, here it is Webflow - KeiganALI
Hi, just checked.
In tablet view, your modal1_component element no longer uses “fixed” for position property. That’s why things are pushed away.
Change it to “fixed”. And make some adjustments to where you place the button + modal.
thanks for the reply, I will give it a try and let you know!
Hi again Anthony,
So I tried what you suggested yet to no avail the modal still continues to push the away the other elements.
I even tried to see if matching the tablet view with the deskstop view would do anything but still the same result.
Hey Gucci,
Can you publish the /untitled page to staging?
I can’t seen the generated HTML / CSS currently.
sure! here you go Untitled
So what is it that you’re trying to do?
Are you trying to have a modal trigger button on the nav bar ( desktop ) and in the hamburger menu ( mobile ) that when clicked, closes the menu and displays the modal centered on the page wherever the user is scrolled to?
yes thats exactly the idea I had in mind!
So in general I prefer to keep things clean and simple, to avoid interference.
Right now your entire modal is inside of the nav, which means it’s physically inside of the dropdown menu.
Since it’s an interactions modal, that creates some layers of complexity… the dropdown will want to close on click plus the nav position will vary depending on where you’re scrolled in the page, plus z-index and stacking order are all affected.
I’d personally do it this way;
my goodness! Thank you so much for the detailed explination and even taking the time to do a whole screen recording.
Thank you so so much for the advice! I will be sure to give this a try!