Streaming live at 10am (PST)

Show/Hide Interactions with Modals


#1

Hello,

I’m looking to simply show/hide two different modals when clicking different buttons. The buttons will be the “codepen” logo and the picture of the bird.
When I click the bird, I want to see the bird information.
When I click the “codepen” logo, I want to see the codepen information.
I only want to show one at a time, but the modal will not repeat in cycles.
I can only click on or the other and only one time.
What may I do to solve this?

https://preview.webflow.com/preview/modal-window-8c6a23?utm_source=modal-window-8c6a23&preview=96135b4dcf0aa6acd6e4b8c6b05697cd

-Kevin


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


#2

@kpaskevicius, from what I have deduced so far, you are missing the 2nd click interactions. Meaning that when you click on either image you get the modal to open, but then it wont close. So that when you click on the bird it wont open either.

Also, what info do you want to show up in the modal for the image logo and for that of the bird?

BTW, you have the “X” in the top section of the codepen modal but not in the bird modal. Need something to click on to exit out of it.

It is the same concept as a menu button. Here is one I am working on: http://body-essence.webflow.io

It is all interactions for the menu.


#3

I want to show the bird model every time I click the bird picture. When I try to repeat the action from Click 1, it will not work. I am copying the same interaction to both clicks. What would you do?


#4

Which one is the bird modal?


#5

It should be the first modal on the top, with ID as “bird”


#6

OK, @kpaskevicius, there are alot of steps that can be done. To clean this up here are some things I would suggest to make it all work together and be easier to use.

I am just gonna create a screencast for you and add it here. So much easier than to type everything out. Take a look at the video and I hope it helps you with everything.

Im a little long winded, but hope this helps. I am gonna keep looking into it and get back to you.


#7

Here is an update to that video:

This better explains things.

Good luck to you.


#8

Hi,

I will try this out next time I work on it.

Thank You Very Much, Brandon


#9

Hello Brandon,

I’m still having some trouble with my project:

I updated the read only link so you may see my new version.
I still cannot figure out the part where I need to have two different divs for each modal.
I also cannot see my buttons for some reason.

Thanks,

Kevin


#10

Kevin,

Please rewatch the second video I posted, it explains where and why you need to have a second Modal.

Here is an updated video:


#11

Brandon,

That seems to be working pretty well! I finally got it to show both modals continuously compared to last time. You’ve been very helpful!


#12

Dont forget to mark this complete!


#13

I’m sorry,
How do I mark as complete?