Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

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!

Presentation1.png

Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

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".

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...