Streaming live at 10am (PST)

Problem with modal window nav structure


#1

Hi I am working on this site that I made in webflow.

It's been going pretty well, the thing I can't figure out is the following.

I have these buttons, and a sort of modal window appears. When you click on the button again it dissapears. For better UI, I also added a closing button in the window to close it.

The issue is that when one window is open, you can still click on the other buttons and open them at the same time.

My question is, how can I set an active window, so other windows don't open, when one is open.

Do I solved this by setting a better Z-index? Or making them tabs? I tried the last, but can't create transparent space dividers between tabs.

This is my shared webflow website link: https://preview.webflow.com/preview/mike-wijdenbosch?preview=23ce2cb2bc7f4af3c9f4c59812d0455e

Any help would be appreciated @cyberdave @thewonglv @PixelGeek @vincent


#2

Hello @Aimanisms,
I would suggest to make modal windows full sized but transparent. and inside that windows add form/gallery/whatever you need. In this way modal background will cover whole screen and will prevent clicking on other buttons. Also you will not need second click functionality on the buttons. For now, if I close modal window with close button, it takes 2 clicks for open it again.

Hope it helps,
Anna


#3

@sabanna Hey Sabanna,

I did remove the second clicks. It now forces people to to have to click the exit button. Which was before a secondary option.

But it doesn't solve my main issue, which is that other windows come in screen when people would click on them. I like the way I designed it size wize, so don't want to go full screen.


#4

Nobody will recognize full screen modal if it will be transparent, but it will cover buttons and will not let user to click it untill modal is opened.


#5

Ah like that! I got you now @sabanna I think . How do I make em fullscreen? Do you mean that I make this element called: Bio for example full screen, by altering width and height to 100%?


#6

Tried that @sabanna, It messed up my design. So I think you mean something else.


#7

Ok, here is screen cast: https://drive.google.com/file/d/0B-7cg8BSq1Z_Z0lOUlExbjZuVzg/view?usp=drivesdk

Cheers,
Anna


#8

Thanks so much for this @sabanna. It fixed the issue of the buttons. It brought up another issue though, placement of the modal windows. They appear different on your screen than mine. Am I doing something wrong with how I place them on the screen?


#9

What do you mean? Could you make a screenshot, please?


#10

Here they are, you see the placement of where they are on the page is different then I saw on your screen, which should be the case @sabanna :


#11

Well, I guess it depends on screen size. You still can adjust positioning like it has to be, but using % instead of pixels.


#12

Ok I will try, but the way I positioned right now, the method I mean. it's correct right? Anyways, thanks for everything! You are awesome.


#13

You can use margins

Or, since now that elements has position: absolute, you can use positioning

But in both options using % will make site more responsive to screen size


#14

Great, it worked! Thanks so much!


#15

Always welcome :smile: Glad I was able to help


#16

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