Link with JS Overlay/Modal functionality

cx

In a sticky footer I created image icons that I want to use as Buttons to display an Full-Screen Overlaying Page that I already prepared in WP Pages.
I tried out a lot but I feel like I got the wrong idea on how to use the custom JS to make the image-Icon a link for in inner WP Page with additional styling and JS functionality

I was thinking about binding modal or overlay operations to display the page with 50% Background opacity. (Overlaying the current site)

I followed the 'Binding Click Events’ instructions and used ‚Edit Image Link‘ to link the page. But I don’t know how to implement the JS and CSS to display the page the way I want. What do I need to add to Custom <head> content?

The code below seems to be suitable to make it work for me.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay2

Hope you might be able to help me out.
Thanks so much!

arminunruh

Well that example seems to be good.
Not sure what exactly is not working for you as I don't see what's going on. Can you post a link to your website where you are trying to achieve this?

cx

http://fabianrockenfeller.com/wordpress/real-info/

I deal with several issues. But mainly I don’t really know how to set a WP Page as the content to show after clicking a text/Image/Link.

I successfully added the JS and CSS from w3school with the link they provided.
But I can not apply the CSS Styling and JS function correctly on a image. As shown in the Documentation I added the binding click event, but the way I did it it is probably terribly wrong.

arminunruh

Hm, I can't see the website because it is password protected.

Yes yes, well I think you can probably make a modal open itself when you click on something. But it won't easily be possible to show the gridder content inside of it :/. You can extend lay theme a bit with your own functionality but just up to a certain point. I'm not sure if I know what you mean by "WP Pages".

If you are comfortable with programming a bit and you want to use the gridder, I think it is probably easier to use laygridder.com

If having modals like that is really important to you and a dealbreaker, then maybe you don't want to use lay theme anymore. Then you can get a refund if you want.