Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Link with JS Overlay/Modal functionality

    General Discussion
    2
    4
    505
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cx last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by

        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?

        1 Reply Last reply Reply Quote 0
        • C
          cx last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • arminunruh
            arminunruh Global Moderator last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post

            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

            Thanks!

            Online Users

            L
            M
            M
            T
            I

            Recent Topics

            • M

              Tag filter / Maximum width

            • open all links in a thumbnail grid in a new tab

            • text underline

            • centred Carousel fixed width and proportions

            laytheme.com