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 also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it