How to add custom popup window in shopify?

Question

Hi simply I want to add a popup window that appears when the user clicks on a link/button on the product page to show him/her the washing instruction for example.

I found this code but I doesn't seem to work with me. I need simple code :)

**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 %} */

Yes I uncommented them.

Answer 1

I would recommend you to use AVADA Size Chart: Size Guide, which is a totally FREE app.

OR

You can read this doc by Shopify. Add a size chart to product pages