2 questions regarding opening closing a modal box

Hi,
I’m a fresh Cwicly user. After a few days I’m starting to get the hang of it.

  1. I’m trying to display a modal to display a navigation menu. I want it to open on load for desktop and tablet browsers, but not on a phone . Maybe someone has done this before, and if so, can please share her/his knowledge on this…?

  2. I’d like the modal box to close when the corresponding icon is clicked , and display/introduce an icon to open it again. So it should trigger 2 actions. Is there an easy way to do this?

Here what I’m trying to do (but failing so far): https://aanlegplaats.com

I’m also trying to figure out how to create this in one button (open and close modal windows). I haven’t found a way to do it yet.

@MiroslavBartik

1 Like

Yes, I know the settings, but it’s not a one-button setup. In the current state, one has to be for opening, the other for closing with the visible/invisible setting.

It is.
Open/close (toggle) a modal from a single block.
Might miss your point though.

Maybe it’s rather a z-index thing to make it work, but I’m not aware of your setup.

Here’s my menu. Unfortunately, I don’t know how to finish it. Z-index didn’t help.

Yes, that’s definitely a z-index thing.
If applied correctly, it will work.

Can’t give any further advice, as mentioned, not aware of your setup.

Here is a screen shot of my current setup. I would be very glad if you could advise me how to modify it so that the button works to open and close the pop-up window.


Thanks @Marius. Spot on here.

@MiroslavBartik I would recommend having a look at our menus/templates in the design library which have this specific setup.

1 Like

Hi @Louis, I don’t think I found the right menu for this. That’s why I’m trying to create my own :slight_smile:

Apply a z-index of 1002 to your very first block inside the Navigator.
You also need to set the position property, e.g. relative.

I think this should be sufficient.

1 Like

Hi @Jeeduppelopee.

Welcome to the community :slight_smile:

  1. This isn’t currently possible through the builder, although it sounds like an interesting proposition. We’ll add it in the next few updates.

  2. Marius’ answer is :+1:

3 Likes

@Marius @Louis Thank you for your time and effort. It worked and the menu works the way I needed it to. It’s amazing how Cwicly as a tool can handle so many great ideas like the mega menu without installing external plugins.

2 Likes

Great to hear from you! Thanks for adding this feature to a future update.

What I’m trying to do is closing the modal box with on click and at the same click make a new icon appear. So there would be 2 actions with one click.

However as explained earlier in the discussion , using a high z-index for the open / close toggle would be another solution.

That’s quite easy to achieve with Relative Styling.
Do you have something specific in mind, like how to animate in/out the icons?

Let me know your requirements and I’ll share something that fits your needs.

Ah thank you.

I want to close the modal box with the ← icon and then have the → icon appear , which is used for opening the modal box. Here’s a screenshot in which you see the 2 icons overlapping. It would be great to have the → icon fade in after the modal box closes, and fade out before the modal box opens.

Scherm­afbeelding 2022-11-27 om 11.22.34

Note:

  • You control the general icon design, like color, size, transition, etc. from the 1st icon block
  • You can substitute icons from the existing icon blocks without breaking anything
  • The file only contains the Modal trigger, including the icons, nothing else
  • Depending on your setup, some additional z-index tweaks might be required. Nothing specific is attached to the file

Actions required:

  • Download and drag the file to the desired place on your canvas
  • Assign the corresponding modal ID to the Modal Trigger block’s link options

Links:

In case something is unclear or you get stuck somewhere, please let me know.

5 Likes

Hi,
That you very much!! I really really really appreciate your efforts.
And… It’s works like a charm … almost.

Should I just add z-index 9999 to the modal trigger icon? And a lower value to the modal box? It might be the same problem as MiroslavBartik had. Since I also can’t place the trigger icon in front. Sorry if this is basic knowledge that I’m perhaps am missing.

The modal box has a z-index of 1000

2 Likes

Hey @Jeeduppelopee.

Glad I could help you out a bit.
Regarding your issue, it should be sufficient to add a z-index of 1002 or higher to the Modal Trigger block, so your z-index of 9999 should actually work.

Unfortunately, here the case as well. Not sure how your other elements are set up and if you made changes to the modal trigger block.

So, I can’t be sure why it’s not working. Do you have a live site?

Edit: Just recognized the URL in the screenshot.
So it seems there is some general unusual setup, which causes the issues. A quick fix would be to move the block outside of the header block, which would be totally fine, since you set a position of fixed anyway.

1 Like

En voila. That’s the solution there. Thanks!

1 Like