Link with JS Overlay/Modal functionality
-
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 functionalityI 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_overlay2Hope you might be able to help me out.
Thanks so much! -
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? -
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. -
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.
I don't answer or check forum DMs, please just post on the forum.
Try this to fix issues before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it