I'd like a link to open as a linked page pop up

[BTAromas]

Hello,

Please can somebody help me?

I'd like to have a link open as a pop up to a page. As you can see on on my first image, there is a link that opens as a pop up highlighted in red (this is the pop up link). 

I'd like the same sort of pop up link in the highlighted red section of my third image, (Find out more).

[Huptech-Web]

Hi @BTAromas , Do you want to open the same popup on the click of the link or do you want to create a different popup modal?

[BTAromas]

Hi, I'm not 100% sure what you mean, this particular link can open to the same page, as i'm going to remove the link (this is the pop up link).

Eventually I want different links to open to different pop up pages. But I'm assuming I can alter the code accordingly.

I don't understand why shopify gives you the option to put a pop up link in the product section but won't let you do the same with other links elsewhere.

Thanks.

[Huptech-Web]

Hi @BTAromas , If you want to open the same popup on the click. Add the below script to your Product template main section file or add the script in the theme.liquid at the bottom before </body> tag

<script>
const modalOpener = document.getElementById('modal-opener-footer');
const modal = document.getElementById('PopupModal-popup_CebXd8');
modalOpener.addEventListener("click", function(e) {
	e.preventDefault()
    modal.setAttribute('open', '');
});
</script>

AT

[BTAromas]

Unfortunately that didn't work. 

[BTAromas]

To be clear, I want the link that says 'Find out more' to open as a pop up.

[Huptech-Web]

Hi @BTAromas , I forgot to mention, Add "modal-opener-footer" id attribute to your link.

[BTAromas]

Okay, how do I do that?

[Huptech-Web]

Hi @BTAromas , Open the code editor from the admin in your Shopify store! To open the editor follow the steps:

1. Go to Admin -> Edit Code. It will open the code editor.
2. Find the file "multicolumn.liquid" Find the "<a>" with "animate-arrow" class and add the attribute.

Review the below screenshots for your reference:
      

[BTAromas]

Worked, thank you. 

How do I get this other link to open as a pop up?

[BTAromas]

Also, now I've deleted the 'This is the Pop UP Link' which I didn't need. This other link isn't working now.

[Huptech-Web]

To open the popup with different links you have to create a for loop for the click event. Follow the below steps and it will open the popup.

1. Add the "modal-opener-footer" class to the "multicolumn.liquid" file.

2. Replace the Javascript code with the below code:

const modalOpeners = document.querySelectorAll('.modal-opener-footer');
let modal = document.getElementById('PopupModal-popup_CebXd8');
modalOpeners.forEach((modalOpener) => {
    modalOpener.addEventListener("click", function(e) {
    	e.preventDefault()
        modal.setAttribute('open', '');
    });    
});

Also, I noticed one thing you have also removed the Popup Modal code with the "This is the Pop UP Link". That's why it is not opening the popup on the click. Add the modal code back and it will work.

[BTAromas]

I don't want the 'This is the pop up link' there though. This was just for your reference, so you knew what I meant by pop up.

Thanks

[BTAromas]

Please lets start again. I have removed the other code so it doesn't cause a problem.

Please can you help me make these links pop ups, opening their respective pages (please note they are different pages for each link).