How can I turn my size chart into a pop-up window?

[Qke]

Hi,

Could you help me in regards to making my size chart into a pop up window instead of taking the customer to another page?

The current way is if you click the link it will open a new page instead i want the same page to remain but a small pop up window to open up so they can see the chart

URL:https://phurry.myshopify.com/collections/dog-clothing/products/the-dog-face-reflective-windproof-pet...

password: chalet123

[Simonsron · Accepted solution]

Hello, I saw it.

Now clicking on that show is opening a pop-up, it doesn't jump to another page! It's just that this popup is a full screen popup!

You could try this code.

.js-size-chart-container{
    background-color: rgba(0,0,0,.7) !important;
}
.js-size-chart-container .size-chart-content{
    background-color: #fff;
}

try this

[Simonsron · Accepted solution]

Hello, I saw it.

Now clicking on that show is opening a pop-up, it doesn't jump to another page! It's just that this popup is a full screen popup!

You could try this code.

.js-size-chart-container{
    background-color: rgba(0,0,0,.7) !important;
}
.js-size-chart-container .size-chart-content{
    background-color: #fff;
}

try this

[Qke]

Thank you !, May i ask where this code needs to be put?

[Simonsron]

assets -> style.css  Put it on the bottom.

[Qke]

Thank you so much, that worked perfectly. However now after the popup comes up, it doesnt allow me to get out of the page unless i press back. i cant click out to close the pop up. Could you help me with this please?

[Simonsron]

I can help you out, but this requires writing js. If you would like me to help you, you can send me an email and invite me as your shop partner!

[Qke]

Thank you, i have sent you a request 🙂

[Simonsron · Accepted solution]

I have finished revising it, do you see if you are satisfied?

[Simonsron]

If there is anything else I can do to help you, please email me directly!

[Qke]

Wow that was quick, thank you so much for your help. i sure will keep you in mind !

[Simonsron]

Trust me, I will save you more time to spend on selling your products.

[AbulHasib]

Hi there, you can try out our app “Bevy Design” for this. Our app has a drag and drop pop-up builder which you can use to create pop-ups without any code. I feel like our app’s On Hover-based trigger will be suitable for this application. You can also use our app to create a full-fledged size chart pop-up, which will be more helpful for your customers to see all the sizes in one place. 
You can acquire additional information about our app through our website: https://bevycommerce.com/design/ 
Let me know If you need to book a meeting with me to go over what our app has to offer.

[wday222]

Here's a solution that doesn't require coding. This worked great for me:

https://www.youtube.com/watch?v=VFAxr_v-8n4&t=273s