Streaming live at 10am (PST)

Need help with close button interaction


#1

Hi

Hopefully this is a simple fix and I've just missed something...

I have built into my website a custom Lightbox for my dynamic lists - a div will appear if a dynamic item is click (which works fine). To then close the div, a user would click the 'X' or the area around the content.

This all works perfectly in preview, but on the actual site, I the closing of the div will not work. I have a similar interaction with the contact form, which works perfectly.

Please please please can someone help me resolve this?

https://preview.webflow.com/preview/dustproof-design?preview=77074fa7bffcb56aef7f1bf893d46be0
http://www.dustproofdesign.com

Many thanks,

Jez


#2

Hi @Jezerama, I would put the Lightbox Button Close directly under the home rollover div container.


#3

Hi @cyberdave and thanks for the response. I've tried moving the 'Lightbox Button Close' directly under the 'Lightbox Container', but with no success. The 'Screen Close' div has the same interaction as the button anyway and is still not working.

On the preview in Webflow, once the Lightbox has opened correctly, it never shuts like it should. The animation to close it should be a reverse of what it is opening it. Also, when it has been opened, the animation on the tiles doesn't work correctly - What I mean is usually, when you hover over the tiles, the title will move up over them, however, once the Lightbox has been opened on one, the animation doesn't flow and the title will just appear on hover.

I think all this is related, but cannot work out what the problem is "S

Thanks for your time and help,

Jez


#4

Hi @Jezerama, thanks for your reply. I checked and when I moved the button, it closed for me. I will take another look :slight_smile:

The opening of the lightbox is not a problem as the element calling the interaction is outside the lightbox container.

Could you also please confirm, what kind of browser is being used, what version and what kind of computer and operating system being used?

I am checking further and will get back to you as soon as possible.


#5

Thanks @cyberdave. There is no problem closing it in preview, just when it's published to http://www.dustproofdesign.com. Very weird.

I am using Mac and have tested on latest versions of Safari and Chrome.

Thanks again,

Jez


#6

Hi @Jezerama, thanks a lot for your patience.

I would suggest to make a few changes, I made a video:

I would probably suggest to change the close button image to be larger, or use some other nice close graphic that you can pin in the top right of the window in the fixed position.

I hope this helps, if not, let me know and I am happy to take a look further.

Cheers

p.s. I love the site!


#7

Wow, thank you so much for all the effort you've gone to! I'm overwhelmed!

Your solution works perfectly! I would never have sorted it on my own.

I have just one more query... Now that the close button is fixed - is there any way to get it back to the position it was before in the top right hand corner of the 'Lightbox Info' div? I can't work out how to do it!?

Thanks again, this community is a real inspiration. And thanks for the site love :smile:

Jez


#8

Hi @Jezerama, thanks, you are welcome :slight_smile:

I would suggest to make some kind of cool graphic, some easy to click on close button, fixed somewhere on the page that looks good.

I would say there are definitely ways to do it, but it may require some rework/recreate the custom lightbox with different structure and styling). I will give it some thought and come back to you :slight_smile:


#9

Hi @cyberdave, just to let you know, I moved the close button back into the 2nd column, where it was originally and seems to still work perfectly! Must have been to do with the sibling function or something?

Either way, works perfectly exactly how I wanted, thank you again, you rock :smile:

Jez


#10

Hi @Jezerama, thanks for letting me know! I am glad it is working now :slight_smile:


#11

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