Modals stacking clicking other triggers

Hi Guys

I’m completely new to webflow and I’m trying to create a job board for construction jobs. I’m taking a lot of inspiration from indeed and one thing in particular is the modal that opens up on the right hand side when clicking on a job. I’ve finally figured out how to create a modal but my problem is I cant figure out how to align it properly on the page and also the modals stack on top of each other when clicking on the next job. I have a close trigger set up but I would like it to work so the modal disappears and the next one takes it’s place when clicked rather than stacking on top. I hope this makes sense and any help would be greatly appreciated.

The page in question is called jobs template in the CMS collection pages.

Here is the link to my site so you can see what I mean.

https://preview.webflow.com/preview/construction-job-board?utm_medium=preview_link&utm_source=dashboard&utm_content=construction-job-board&preview=98f32f20ccc6ad3d6cc40061bd70a0cd&workflow=preview


Here is my public share link: LINK
(how to access public share link)

Hello @keenan_nicholson and welcome to the forum!

Regarding the alignment issues, you just need to set a consistent width on all modals, you can use % to make it responsive

Feel free to adjust the 40% to your liking, that should make them all have the same width, if that’s what you mean by alignment.

Regarding the stacking, unfortunately, your problem is a bit tricky since the number of jobs differ per page. Now that they all have the same width, they can be on top of each other, and the way to close a modal is to click on the card that’s tied to that modal a second time

If you still want that clicking a card would hide the other modals, can’t think of a webflow-native solution, but it’s definitely do-able with custom code if you want clicking on a card automatically closes the rest of the cards. However it’s a little bit advanced since you’ll be working with animations and transitions using JavaScript.

An alternative that may work for you is if you just want to display info on the modal without having to click anything inside, you can use a hover trigger instead of clicking. This way, when you hover out of a card and into the next, the animations would be much easier to deal with natively using webflow.

Hi

Thankyou so much for the speedy response and taking the time to help out. The alignment is perfect now, thanks! Also I would like the modals to still disappear when clicking on the job card so looks like ill have to learn how to do custom code. Thankyou.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.