hello,
I want to add a modal/pop up in product page. I need it for displaying extra information about the variant selection, so the pop up needs to be opened on clicking an i symbol as image in product page below the price.
can anyone please help me with this.
Thanks in advance.
yes please try this code and modification ad you like
Should mention that this demo is using fancybox:
Thank you so much.. which files should I add these codes to?
you have modification code
you have add fancybox css and js file on theme.liquide and html code on product page as demo
Thank you so much..
I want only #1 Default modal , so i should i add only the html code on product page? But the modal is not opening, only the button is displayed. Im using supply theme.
Thank in advance.
please check this its easy for your its simple css and html popup code can you please just copy past
thank you so much.. it is working, but i wanted to click on an image.. when i replaced with the pop up is not opening. is there anyway solution for that?
Also, can we open the pop near the button/image? now it is opening on top of the screen.
i want something like this.
on clicking i image, this should pop up.
Thanks in advance.
Put the image inside of the tag, it needs the anchor tag to function, I just changed that and a little css and saved it out:
https://codepen.io/ninthony/pen/vYmYMab
If this works for you please don’t accept my solution as the answer, as it is @KetanKumar who did the work.
thank you so much.. it is working, that was really very helpful..
but one problem is happening.. after closing the pop up windown the screen is refreshed and goes to the top.. customer will have to scrol again to come to where they left.. can this one be fixed? can you please help with this ?
Thanks in advance
can you please share the video further issue?
After i close the pop up window, screen goes to the top
video for reference.
Thanks in advance
can you please share store url?
sure, this is the url
i have check this do you have position fixed any css code it was generate issue
i used this css
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border-radius: 50%;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #7e9ed6;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #ff0000;
}
.popup .close:hover {
color: #4472C4 ;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Thank you
not this one any other code do you have added?
No, i only changed color of and added image to announcement in header section.
Thank you
