Problem with modal window nav structure

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:

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

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,

@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.

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.

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%?

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

Ok, here is screen cast:


1 Like

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?

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

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 :

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

1 Like

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.

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

1 Like

Great, it worked! Thanks so much!

Always welcome :slight_smile: Glad I was able to help

1 Like

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