title: Close popup once click on close button
body: <p><strong>Background</strong> :</p>
  
  <p>1.User click on <strong>Mask</strong> &amp; upload their own image on the mask....</p>
  
  <p>2.Once image uploaded, Edit Text is displaying on image....</p>
  
  <p>3.Once user click on Edit Text, we are displaying pop up box....</p>
  
  <p>4.Inside Popup box, we are displaying text <strong>Content</strong> &amp; button <strong>Close</strong></p>
  
  <p>Once we click on "<strong>close</strong>" , its closing the pop up box.... </p>
  
  <pre><code>$("&lt;div id=\'dark" + newImageLoadedId + "\' class=\'dark_content\'&gt;" +  
      "content" +
        "&lt;a href=\"javascript:void(0)\" onclick=\"document.getElementById(\'dark" + newImageLoadedId + "\').style.display=\'none\'\"&gt;Close&lt;/a&gt;" + "&lt;/div&gt;").appendTo(".pip" + newImageLoadedId).css({
        "left": $('.edit' + newImageLoadedId).width() + 2 + "px",
        "top": "0px"
      });
  </code></pre>
  
  <p><a href="https://codepen.io/kidsdial/pen/QPqzzJ" rel="nofollow noreferrer">Codepen1</a></p>
  
  <p>Instead of keeping "content" , i replaced 2nd line in above code as below using <strong>template tag</strong>:</p>
  
  <p><strong>script</strong></p>
  
  <pre><code>$("&lt;div id=\'dark" + newImageLoadedId + "\' class=\'dark_content\'&gt;" +  
      $('#demoTemplate').html() +
        "&lt;a href=\"javascript:void(0)\" onclick=\"document.getElementById(\'dark" + newImageLoadedId + "\').style.display=\'none\'\"&gt;Close&lt;/a&gt;" + "&lt;/div&gt;").appendTo(".pip" + newImageLoadedId).css({
        "left": $('.edit' + newImageLoadedId).width() + 2 + "px",
        "top": "0px"
      });
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;template id='demoTemplate'&gt;
     &lt;span class="pip"&gt;      
           &lt;div class="btn-group" &gt;
              content
           &lt;/div&gt;                              
     &lt;/span&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Issue</strong> : </p>
  
  <p>Now Close button is not clickable....</p>
  
  <p><a href="https://codepen.io/kidsdial/pen/yrzGxw" rel="nofollow noreferrer">Codepen2</a></p>
  
  <p><strong>code snippet</strong> : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Display pop up next to text
  function closePopUp(el) {
      el.style.display = 'none';
      openID = null
  }
  
  function openPopUp(el) {
      ///console.log(" open is called ",id)
      if (openID != null) {
          closePopUp(openID)
      }
      el.style.display = 'block';
      openID = el;
  }
  
  
  let openID = null;
  
  
  var target;
  var imageUrl = "https://i.imgur.com/RzEm1WK.png";
  
  let jsonData = {
    "path" : " newyear collage\/",
    "info" : {
      "author" : "",
      "keywords" : "",
      "file" : "newyear collage",
      "date" : "sRGB",
      "title" : "",
      "description" : "Normal",
      "generator" : "Export Kit v1.2.8"
    },
    "name" : "newyear collage",
    "layers" : [
      {
        "x" : 0,
        "height" : 612,
        "layers" : [
          {
            "x" : 0,
            "color" : "0xFFFFFF",
            "height" : 612,
            "y" : 0,
            "width" : 612,
            "shapeType" : "rectangle",
            "type" : "shape",
            "name" : "bg_rectangle"
          },
          {
            "x" : 160,
            "height" : 296,
            "layers" : [
              {
                "x" : 0,
                "height" : 296,
                "src" : "ax0HVTs.png",
                "y" : 0,
                "width" : 429,
                "type" : "image",
                "name" : "mask_image_1"
              },
              {
                "radius" : "26 \/ 27",
                "color" : "0xACACAC",
                "x" : 188,
                "y" : 122,
                "height" : 53,
                "width" : 53,
                "shapeType" : "ellipse",
                "type" : "shape",
                "name" : "useradd_ellipse1"
              }
            ],
            "y" : 291,
            "width" : 429,
            "type" : "group",
            "name" : "user_image_1"
          },
          {
            "x" : 25,
            "height" : 324,
            "layers" : [
              {
                "x" : 0,
                "height" : 324,
                "src" : "hEM2kEP.png",
                "y" : 0,
                "width" : 471,
                "type" : "image",
                "name" : "mask_image_2"
              },
              {
                "radius" : "26 \/ 27",
                "color" : "0xACACAC",
                "x" : 209,
                "y" : 136,
                "height" : 53,
                "width" : 53,
                "shapeType" : "ellipse",
                "type" : "shape",
                "name" : "useradd_ellipse_2"
              }
            ],
            "y" : 22,
            "width" : 471,
            "type" : "group",
            "name" : "user_image_2"
          }
        ],
        "y" : 0,
        "width" : 612,
        "type" : "group",
        "name" : "newyearcollage08"
      }
    ]
  };
  
  $(document).ready(function() {
  
      // below code will upload image onclick mask image
  
      $('.container').click(function(e) {
          // filtering out non-canvas clicks
          if (e.target.tagName !== 'CANVAS') return;
  
          // getting absolute points relative to container
          const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
          const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;
  
          const $canvasList = $(this).find('canvas');
          // moving all canvas parents on the same z-index
          $canvasList.parent().css({
              zIndex: 0
          });
  
          $canvasList.filter(function() { // filtering only applicable canvases
              const bbox = this.getBoundingClientRect();
              const canvasTop = bbox.top + window.scrollY;
              const canvasLeft = bbox.left + window.scrollX;
              return (
                  absX &gt;= canvasLeft &amp;&amp; absX &lt;= canvasLeft + bbox.width &amp;&amp;
                  absY &gt;= canvasTop &amp;&amp; absY &lt;= canvasTop + bbox.height)
          }).each(function() { // checking white in a click position
              const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
              const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
              const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
              if (pixel[3] === 255) {
                  $(this).parent().css({
                      zIndex: 2
                  })
                  target = this.id;
                  console.log(target);
                  setTimeout(() =&gt; {
                      $('#fileup').click();
                  }, 20);
              }
          })
      });
  
      // Below code will fetch mask images from json file
  
      function getAllSrc(layers) {
          let arr = [];
          layers.forEach(layer =&gt; {
              if (layer.src) {
                  arr.push({
                      src: layer.src,
                      x: layer.x,
                      y: layer.y,
                      height: layer.height,
                      width: layer.width,
                      name: layer.name
                  });
              } else if (layer.layers) {
                  let newArr = getAllSrc(layer.layers);
                  if (newArr.length &gt; 0) {
                      newArr.forEach(({
                          src,
                          x,
                          y,
                          height,
                          width,
                          name
                      }) =&gt; {
                          arr.push({
                              src,
                              x: (layer.x + x),
                              y: (layer.y + y),
                              height,
                              width,
                              name: (name)
                          });
                      });
                  }
              }
          });
          return arr;
      }
  
      function json(data)
  
      {
          var width = 0;
          var height = 0;
  
          let arr = getAllSrc(data.layers);
  
          let layer1 = data.layers;
          width = layer1[0].width;
          height = layer1[0].height;
          let counter = 0;
          let table = [];
  
          for (let {
                  src,
                  x,
                  y,
                  name
              } of arr) {
              $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
  
              //Get Height and width of mask image [ edit button ]
              var ImagePosition = arr;
              //code end
  
              // Display icon only for mask images
  
              if (name.indexOf('mask_') !== -1) {
                  var imageUrl1 = imageUrl;
              } else {
                  var imageUrl1 = '';
              }
              //code end
  
              var mask = $(".container").mask({
                  imageUrl: imageUrl1,
                  maskImageUrl: 'https://i.imgur.com/' + src,
                  onMaskImageCreate: function(img) {
                      // Mask image positions
                      img.css({
                          "position": "absolute",
                          "left": x + "px",
                          "top": y + "px"
                      });
                      // end
  
                  },
                  id: counter
              });
              table.push(mask);
              fileup.onchange = function() {
  
                  let mask2 = table[target];
                  const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
                  document.getElementById('fileup').value = "";
  
                      //  Edit image
  
  if ($(".masked-img" + newImageLoadedId).length === 1) 
  {
      $("&lt;span class=\"pip pip" + newImageLoadedId + "\"&gt;" +
          "&lt;a onclick='document.getElementById(\"dark" + newImageLoadedId + "\").style.display=\"block\";'&gt;&lt;span class=\"edit edit" + newImageLoadedId + "\" &gt;Edit &lt;/span&gt;&lt;/a&gt;" +
      "&lt;/span&gt;").insertAfter(".masked-img" + newImageLoadedId).css({
          "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
          "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2) + "px"
      });
   
   $("&lt;div id=\'dark" + newImageLoadedId + "\' class=\'dark_content\'&gt;" + 
   $('#demoTemplate').html() +
        "&lt;a href=\"javascript:void(0)\" onclick=\"document.getElementById(\'dark" + newImageLoadedId + "\').style.display=\'none\'\"&gt;Close&lt;/a&gt;" + "&lt;/div&gt;").appendTo(".pip" + newImageLoadedId).css({
        "left": $('.edit' + newImageLoadedId).width() + 2 + "px",
        "top": "0px"
      });
   
   
  }                   
                      // Edit code end here....        
                      //  Remove image
  
  $("&lt;br/&gt;&lt;span id=\"" + newImageLoadedId + "\" class=\"remove\"&gt;Remove&lt;/span&gt;").insertAfter(".masked-img" + newImageLoadedId).css({
      "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
      "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2 +25) + "px"
  });    
  
                  $(".remove").click(function(event) {
                      const canvasId = "canvas#" + event.currentTarget.id;
                      // Delete the image
                      const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
                      ctx.fillStyle = "white"
                      ctx.fillRect(0, 0, 500, 500)
                      // Delete the Remove button
       $(this).next().find('.edit').remove()
                      $(this).remove();
       
                  });
  
                    // Remove image code end here.... 
              };
              counter++;
          }
          drawText(data);
      }
      json(jsonData);
  }); // end of document ready
  
  const fonts = []; // caching duplicate fonts
  
  function drawText(layer) {
  
      if (layer.type === 'image') return;
  
      if (!layer.type || layer.type === 'group') {
          return layer.layers.forEach(drawText)
      }
  
      if (layer.type === 'text') {
          const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;
  
          if (!fonts.includes(url)) {
              fonts.push(url);
              $("style").prepend("@font-face {\n" +
                  "\tfont-family: \"" + layer.font + "\";\n" +
                  "\tsrc: url(" + url + ") format('truetype');\n" +
                  "}");
          }
  
          // Below is POP UP Code
          const lightId = 'light' + layer.name
          const lightIdString = '#' + lightId
          $('.container').append(
              '&lt;a id ="' + layer.name + '" onclick="openPopUp(' + lightId + ')"' +
              '&lt;div class="txtContainer" contenteditable="true" ' +
              'style="' +
              'left: ' + layer.x + 'px; ' +
              'top: ' + layer.y + 'px; ' +
              'font-size: ' + layer.size + 'px; ' +
              '"&gt;' + layer.text + '&lt;/div&gt;&lt;/a&gt;' +
              '&lt;div id="light' + layer.name + '" class="white_content" style="' +
              'left: ' + layer.x + 'px; ' +
              'top: ' + layer.y + 'px; ' + '"&gt; content &lt;a href="javascript:void(0)" ' +
              'onclick="closePopUp(' + lightId + ')"&gt;Close&lt;/a&gt;&lt;/div&gt; &lt;div&gt;'
          );
          document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'
          // Above is POP UP Code
      }
  
  }
  // extempl code end 
  
  
  
  // jq plugin 
  
  (function($) {
      var JQmasks = [];
      $.fn.mask = function(options) {
          // This is the easiest way to have default options.
          var settings = $.extend({
              // These are the defaults.
              maskImageUrl: undefined,
              imageUrl: undefined,
              scale: 1,
              id: new Date().getUTCMilliseconds().toString(),
              x: 0, // image start position
              y: 0, // image start position
              onMaskImageCreate: function(div) {},
          }, options);
  
  
          var container = $(this);
  
          let prevX = 0,
              prevY = 0,
              draggable = false,
              img,
              canvas,
              context,
              image,
              timeout,
              initImage = false,
              startX = settings.x,
              startY = settings.y,
              div;
  
          container.mousePosition = function(event) {
              return {
                  x: event.pageX || event.offsetX,
                  y: event.pageY || event.offsetY
              };
          }
  
          container.selected = function(ev) {
              var pos = container.mousePosition(ev);
              var item = $(".masked-img canvas").filter(function() {
                  var offset = $(this).offset()
                  var x = pos.x - offset.left;
                  var y = pos.y - offset.top;
                  var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
                  return d[0] &gt; 0
              });
  
              JQmasks.forEach(function(el) {
                  var id = item.length &gt; 0 ? $(item).attr("id") : "";
                  if (el.id == id)
                      el.item.enable();
                  else el.item.disable();
              });
          };
  
          container.enable = function() {
              draggable = true;
              $(canvas).attr("active", "true");
              div.css({
                  "z-index": 2
              });
          }
  
          container.disable = function() {
              draggable = false;
              $(canvas).attr("active", "false");
              div.css({
                  "z-index": 1
              });
          }
  
  
          container.onDragStart = function(evt) {
              if (evt.target.getContext) {
                  var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
  
                  $(canvas).attr("active", "true");
                  container.selected(evt);
                  prevX = evt.clientX;
                  prevY = evt.clientY;
                  var img = new Image();
                  evt.originalEvent.dataTransfer.setDragImage(img, 10, 10);
                  evt.originalEvent.dataTransfer.setData('text/plain', 'anything');
  
              }
          };
  
          container.getImagePosition = function() {
              return {
                  x: settings.x,
                  y: settings.y,
                  scale: settings.scale
              };
          };
  
          container.onDragOver = function(evt) {
  
              if (evt.target.getContext) {
                  var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
                  if (pixel[3] === 255) {
                      if (draggable &amp;&amp; $(canvas).attr("active") === "true") {
                          var x = settings.x + evt.clientX - prevX;
                          var y = settings.y + evt.clientY - prevY;
                          if (x == settings.x &amp;&amp; y == settings.y)
                              return; // position has not changed
                          settings.x += evt.clientX - prevX;
                          settings.y += evt.clientY - prevY;
                          prevX = evt.clientX;
                          prevY = evt.clientY;
                          clearTimeout(timeout);
                          timeout = setTimeout(function() {
                              container.updateStyle();
                              renderInnerImage();
                          }, 20);
                      }
                  } else {
                      evt.stopPropagation();
                      return false;
                  }
              }
          };
  
          container.updateStyle = function() {
              return new Promise((resolve, reject) =&gt; {
                  context.beginPath();
                  context.globalCompositeOperation = "source-over";
                  image = new Image();
                  image.setAttribute('crossOrigin', 'anonymous');
                  image.src = settings.maskImageUrl;
                  image.onload = function() {
                      canvas.width = image.width;
                      canvas.height = image.height;
                      context.drawImage(image, 0, 0, image.width, image.height);
                      div.css({
                          "width": image.width,
                          "height": image.height
                      });
                      resolve();
                  };
              });
          };
  
          function renderInnerImage() {
              img = new Image();
              img.setAttribute('crossOrigin', 'anonymous');
              img.src = settings.imageUrl;
              img.onload = function() {
                  settings.x = settings.x == 0 &amp;&amp; initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
                  settings.y = settings.y == 0 &amp;&amp; initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
                  context.globalCompositeOperation = 'source-atop';
                  context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                  initImage = false;
              };
          }
  
          // change the draggable image
  
          container.loadImage = function(imageUrl) {
              console.log("load");
              //if (img)
              // img.remove();
              // reset the code.
              settings.y = startY;
              settings.x = startX;
              prevX = prevY = 0;
              settings.imageUrl = imageUrl;
              initImage = true;
              container.updateStyle().then(renderInnerImage);
              // sirpepole  Add this
              return settings.id;
          };
  
  
          // change the masked Image
          container.loadMaskImage = function(imageUrl, from) {
              canvas = document.createElement("canvas");
              context = canvas.getContext('2d');
              canvas.setAttribute("draggable", "true");
              canvas.setAttribute("id", settings.id);
              settings.maskImageUrl = imageUrl;
              div = $("&lt;div/&gt;", {
                  "class": "masked-img"
              }).append(canvas);
  
              // div.find("canvas").on('touchstart mousedown', function(event)
              div.find("canvas").on('dragstart', function(event) {
                  if (event.handled === false) return;
                  event.handled = true;
                  container.onDragStart(event);
              });
  
              div.find("canvas").on('touchend mouseup', function(event) {
                  if (event.handled === false) return;
                  event.handled = true;
                  container.selected(event);
              });
  
              div.find("canvas").bind("dragover", container.onDragOver);
              container.append(div);
              if (settings.onMaskImageCreate)
                  settings.onMaskImageCreate(div);
              container.loadImage(settings.imageUrl);
          };
          container.loadMaskImage(settings.maskImageUrl);
          JQmasks.push({
              item: container,
              id: settings.id
          })
          // Edit image
          div.addClass('masked-img' + settings.id);
          // code end
          return container;
      };
  }(jQuery));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
   background: gold;
   position: relative;
  }
  
  .container img {
   position: absolute;
   top: 0;
   bottom: 250px;
   left: 0;
   right: 0;
   margin: auto;
   z-index: 999;
  }
  
  .masked-img {
   overflow: hidden;
   position: relative;
  }
  
  .txtContainer {
   position: absolute;
   text-align: center;
   color: #FFF
  }
  
  .txtContainer:hover {
   background: red;
   padding: 1px;
   border-style: dotted;
  }
  
  .pip {
   display: inline-block;
   margin: 0;
   position: absolute;
  }
  
  .remove { 
   background: #444;
   border: 1px solid black;
   color: white;
   text-align: center;
   cursor: pointer;
   position: absolute;
   z-index: 3;
  }
  
  .remove:hover {
   background: white;
   color: black;
  }
  
  .edit {
   display: block;
   background: #444;
   border: 1px solid black;
   color: white;
   text-align: center;
   cursor: pointer;
   position: absolute;
   z-index: 3;
  }
  
  .edit:hover {
   background: white;
   color: black;
   position: absolute;
   z-index: 3;
  }
  
  .white_content {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 50%;
   height: 50%;
   padding: 16px;
   border: 16px solid orange;
   background-color: white;
   z-index: 1002;
   overflow: auto;
  }
  
  .dark_content {
   display: none;
   position: relative;
   top: 25%;
   left: 25%;
   width: 350px;
   height: 350px;
   padding: 16px;
   border: 16px solid orange;
   background-color: white;
   z-index: 1002;
   overflow: auto;
  }
  
  .btn-group 
  { 
  position:relative; left:50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input id="fileup" name="fileup" type="file" style="display:none" &gt;
  
  &lt;div class="container"&gt;
  
  &lt;/div&gt;
  
  &lt;template id='demoTemplate'&gt;
     &lt;span class="pip"&gt;
        
           &lt;div class="btn-group" &gt;
              content
           &lt;/div&gt;                 
       
     &lt;/span&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>