title: How to add custom popup window in shopify?
body: <p>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.</p>
  
  <p>I found this <a href="https://codepen.io/TopherV/pen/yNOeXO" rel="nofollow">code</a> but I doesn't seem to work with me. I need simple code :) </p>
  
  <pre><code>**HTML**
          &lt;!-- {% if template contains 'product' %} --&gt;
      &lt;!-- begin pop-up wrapper --&gt;
      &lt;div class="size-popup"&gt;
              &lt;!-- Button code --&gt;
              &lt;p class="pop-btn"&gt;Size Chart&lt;/p&gt;
              &lt;!-- the pop-up content code --&gt;
              &lt;div class="pop-up"&gt;
                      &lt;span&gt;x&lt;/span&gt;
                      &lt;div class="pop-content"&gt;
                              &lt;!-- uncomment next line for shopify --&gt;
                              &lt;!-- &lt;h2&gt;{{ pages.size-chart.title }}&lt;/h2&gt;
          {{ pages.size-chart.content }} --&gt;
                              &lt;p&gt;Test text box content, delete me when on Shopify &lt;/p&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- end pop-up content --&gt;
      &lt;/div&gt;
      &lt;!-- end pop-up wrapper --&gt;
      &lt;!-- uncomment next line for shopify --&gt;
      &lt;!-- {% endif %} --&gt;
  
  **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 %} */
  </code></pre>
  
  <p>Yes I uncommented them.</p>