How to give a direct link to a pop-up

Design help Layout & Design
1

I am trying to give some pop-ups I built on webflow {a click on button activates the pop-ups normally} shareable links, more like an anchor link that can easily open up my pop-ups once clicked on without having to click on the buttons.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

I asked ChatGPT and got this:

Here’s an example of a jQuery script that opens a popup modal when a user clicks on a specific link:

javascript

$(document).ready(function() {
  $('a[href="#popup-link"]').click(function() {
    $('#popup-modal').fadeIn();
    return false;
  });
});

This script listens for a click event on a link with href="#popup-link". When the link is clicked, it shows a modal with an ID of popup-modal. You can modify the href and ID values to match your specific use case.

If you want to trigger the modal on page load rather than on click, you can use the following code instead:

javascript

$(document).ready(function() {
  if (window.location.href.indexOf("specific-link") > -1) {
    $('#popup-modal').fadeIn();
  }
});

This code checks if the current URL contains the text “specific-link”. If it does, it shows the modal with an ID of popup-modal. Again, you can modify the URL text and ID value to match your specific use case.

And in Webflow, you can add these pieces of code in the </body> custom code area of the page.

Hope this helps :slight_smile:

3

Hi Yusuf,

I’m assuming your popup is built using Webflow interactions?

In my research I have not found any way to invoke Webflow’s IX2 interactions directly from script, even though this used to be possible with IX.

What you can do however is trigger them from a button, and then click the button from script, more or less achieving the same thing with a small hack.

Your script would detect whether there is a #hash on your querystring, and then if it is present, it would “click” your IX2 button trigger.

In this example, you have an element set as your interaction trigger on a click. It can be hidden if you want. Give that element an ID of trigger-popup.

In </body> code;

$(function() {
  // Check if the URL contains a hashtag of #popup
  if (window.location.hash === "#popup") {
    // Find the button on the page with the jQuery selector, can be hidden
    var trigger = $('#trigger-popup');
    // Click the button if it exists
    if (trigger.length > 0) {
      trigger.click();
    }
  }
});
4

Thanks a bunch Nelson! I tried using both options but none seems to work. :cry:

5

https://preview.webflow.com/preview/climate-commitment?utm_medium=preview_link&utm_source=designer&utm_content=climate-commitment&preview=6ae21be9cbe2ef467b9b54ca545a8e54&pageId=63e61d3ab8870e0f2f0658bc&workflow=preview

Here is the read only link MEMETICAN, I really didnt Understand your explanations can you please check through to see what can be done

6

I can’t really make it any simpler than I’ve already described. Looks like your box-image-wrappers are your click triggers for your IX2 modals, so that’s where you’d assign an ID and put it in the script.

However you have 11 of these, so you’ll need to expand that for each.

If you’re really stuck and need help with the coding, integration and testing, you can message me by clicking my name here, and I can send you rates.

7

Hey @thetomiwayusuff I’m late to this thread, but I just now found a solid answer for your question. It’s free and relatively easy to setup. Hopefully this is helpful for someone in the future.

Benefits:
:white_check_mark: Open any modal with a link. Try it
:white_check_mark: Easy to design & hide.
:white_check_mark: Multiple modals per page.
:white_check_mark: No Webflow Interactions.
:white_check_mark: Works with Webflow CMS.
:white_check_mark: Works with Rich Text elements.

Here’s a link to the cloneable project.

Here’s the 4min tutorial video: