Hey there! I'm looking to incorporate a pop-up window that will appear when a user clicks on a link or button on the product page. This pop-up will display washing instructions, for example.
I came across this code snippet, but it doesn't seem to be working for me. I need a simpler solution :)
**HTML**
<!-- {% if template contains 'product' %} -->
<!-- begin pop-up wrapper -->
<div class="size-popup">
<!-- Button code -->
<p class="pop-btn">Size Chart</p>
<!-- the pop-up content code -->
<div class="pop-up">
<span>x</span>
<div class="pop-content">
<!-- uncomment next line for shopify -->
<!-- <h2>{{ pages.size-chart.title }}</h2>
{{ pages.size-chart.content }} -->
<p>Test text box content, delete me when on Shopify </p>
</div>
</div>
<!-- end pop-up content -->
</div>
<!-- end pop-up wrapper -->
<!-- uncomment next line for shopify -->
<!-- {% endif %} -->
**CSS**
div.size-popup .pop-btn {
background: #dadada;
width: 150px;
height: 40px;
line-height: 40px;
text-align: center;
color: #3c3c3c;
margin: 200px auto;
border-radius: 5px;
border: 1px solid #3c3c3c;
cursor: pointer;
}
div.size-popup .pop-btn:hover {
color: #064B58;
}
div.size-popup .pop-up {
display: none;
height: auto;
width: 50%;
margin: 40px auto;
background: #fff;
position: absolute;
z-index: 1;
border-radius: 5px;
box-shadow: 0 0 20px #000;
top: 20%;
left: 25%;
}
div.size-popup span {
border-radius: 0 0 30px 30px;
margin-left: 90%;
background: #000;
color: #fff;
font-size: 20px;
height: 10px;
padding: 0 5px;
cursor: pointer;
}
div.size-popup .pop-content {
box-sizing: border-box;
padding: 5px 20px 20px 20px;
}
div.size-popup .pop-content p {
font-size: 1em;
margin-bottom: 10px;
}
**Javascript**
/* {% if template contains 'product' %} */
$(document).ready(function() {
$('.pop-up').hide(0);
$('.pop-btn').click(function() {
$('.pop-up').fadeIn(300);
$('.pop-btn').hide(0);
});
$('.pop-up span').click(function() {
$('.pop-up').fadeOut(300);
$('.pop-btn').show(0);
});
});
/* {% endif %} */
Indeed, I have uncommented those lines.