Alert Upon Click

Site URL: https://www.petitjeanjewellery.ca/

Hi folks.  First time poster.  I'm new to CSS, HTML and JavaScript but have used custom code for this website.

Working on this site:  www.petitjeanjewellery.ca, password: julesjewels

My question surrounds the shop page.  The actual shopping experience takes place at a different URL, https://petitjean.jewelershowcase.com which, before you ask, I cannot modify at all.  The squarespace shop page therefore is just a list of hyperlinks pointing to that other site.  

When clicking on a shop category, early test users are finding it confusing to be linked away from the 'squarespace' environment and into a new one, with the familiar layout and navigation bar suddenly gone and no way to get back.  So I'd like to alert them any time they click on a link beginning with "https://petitjean.jewelershowcase.com".  A shadowbox-type alert that says "We are about to launch our online shop in a new tab.  Ok/Cancel/Learn More."  I'll attach a mockup image.

I'm reading about modals, but can't seem to make them work in squarespace.  Nor do I know how to make them appear only when a hyperlink is clicked that begins with "https://petitjean.jewelershowcase.com".

References:

1. https://www.w3schools.com/howto/howto_css_modals.asp
2. https://www.solodev.com/blog/web-design/how-to-make-an-external-link-pop-up-modal.stml

Any ideas? 

I've already been down the embedded iframe road, and don't want to go that route.

Thank you in advance!

Hi,

This will require JavaScript code. Which plan will you use?

Hi Tuan, thanks for the response.

You asked which plan/reference I'll use.  Would one of my two references work best in Squarespace to achieve what I'm aiming for?  Both have HTML, CSS and JavaScript components, but maybe Reference #2 would be better because it prompts the user with options ("Ok" and "Cancel").  Those aren't the exact options I need however ("Ok", "Cancel", "Learn More"), and the alert modal is presented for any external link instead of just ones that begin with "https://petitjean.jewelershowcase.com".

@tuanphan *Nudge nudge!* Any thoughts? Really appreciate any help you can provide.

Am I doing something wrong on this forum? How do I get help?