Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Link with JS Overlay/Modal functionality

Link with JS Overlay/Modal functionality

Scheduled Pinned Locked Moved General Discussion
4 Posts 2 Posters 567 Views
  • 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 Offline
    C Offline
    cx
    wrote on last edited by
    #1

    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
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • C Offline
        C Offline
        cx
        wrote on last edited by
        #3

        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
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          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
          0
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          I also code custom websites or custom Lay features.
          💿 Email me here: 💿
          info@laytheme.com

          Before you post:
          1. When using a WordPress Cache plugin, disable it or clear your cache.
          2. Update Lay Theme and all Lay Theme Addons
          3. Disable all Plugins
          4. 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:
          1. Post a link to where the problem is
          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
          Online Users
          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
          laytheme.com
          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Recent
          • Tags
          • Popular
          • Users
          • Search