title: Partial Pop up display if we use overflow : hidden
body: <p>We are Displaying <strong>text</strong> inside <strong>container</strong> as below :</p>
  
  <p><a href="https://i.stack.imgur.com/NTjrt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NTjrt.png" alt="enter image description here"></a></p>
  
  <p>Onclick Text, We are doing below things :</p>
  
  <p>1.Allowing user to <strong>add more text</strong></p>
  
  <p>2.Display <strong>Pop Up</strong> Box</p>
  
  <p><a href="https://i.stack.imgur.com/TDboZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TDboZ.png" alt="enter image description here"></a></p>
  
  <p><strong>Issue</strong> : </p>
  
  <p>When User added more text, it was displaying beyond the container, but we wanted to hide the text which displayed beyond the container.... </p>
  
  <p>so we added <code>overflow: hidden;</code> for the container, but now only <strong>partial</strong> pop up box is displaying as below....</p>
  
  <p><a href="https://i.stack.imgur.com/WiiHr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WiiHr.png" alt="enter image description here"></a></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>//  Close text pop up onclick outside
  
  $(document).mouseup(function(e) {
      var container = $('.white_content, .font-select');
  
      // if the target of the click isn't the container nor a descendant of the container
      if (!container.is(e.target) &amp;&amp; container.has(e.target).length === 0) {
          container.hide();
          $('.font-select').css('display', 'none');
      }
  });
  
  // end
  
  var className;
  
  // Display pop up next to text
  
  function closePopUp(el) {
      el.style.display = 'none';
      $('.font-select').css('display', 'none');
      openID = null
  }
  
  function openPopUp(el) {
      // console.log(el);
      if (openID != null) {
          closePopUp(openID)
      }
  
      $('.font-select:first').css({
          display: 'block'
      });
  
      el.style.display = 'block';
      openID = el;
  }
  
  
  
  let openID = null;
  
  var target;
  const imageUrl = "https://i.imgur.com/RzEm1WK.png";
  
  let jsonData = {   
      
      "layers": [{
          "x": 0,
          "height": 300,
          "layers": [                      
              {
                  "justification": "center",
                  "font": "Coustard-Black",
                  "x": 190,
                  "y": 150,
                  "src": "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
                  "width": 72,
                  "type": "text",
                  "color": "red",
                  "size": 32,
                  "text": "DATE",
                  "height": 17,
                  "name": "edit_date"
              }
          ],
          "y": 0,
          "width": 350,
          "type": "group",
          "name": "fb_post_4"
      }]
  };
  
  const containerElement = $('#container');
  const fileUp = $('#fileup');
  
  $(function() {   
  
      // IGNORE BELOW CODE
  
      //  Fetch text 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 = [];
  
          // container dimensions
          containerElement.css('width', width + "px").css('height', height + "px").addClass('temp');
          //end
  
          for (let {
                  src,
                  x,
                  y,
                  name
              } of arr) {
                     
              var imageUrl1 = '';                         
              var mask = $(".container").mask({
                  imageUrl: imageUrl1,
  
                  // Fetch Mask images
                  maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + src,
                  // end
  
                  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 = "";               
              };
              counter++;
          }
  
          // Text
          drawText(data);
      }
      json(jsonData);
  }); // end of function
  
  // IGNORE ABOVE CODE
  
  //Fetch text
  
  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 = 'https://i.imgur.com/' + 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;input id="font" style="display:none"&gt;&lt;a id ="' + layer.name + '" onclick="openPopUp(' + lightId + ')"' +
              '&lt;div class="txtContainer" id = "text" 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; ' +          
              '&lt;a class = "close" href="javascript:void(0)" onclick="closePopUp(' + lightId + ')"&gt;Close this pop up box&lt;/a&gt;&lt;/div&gt; &lt;div&gt;'
          );    
    
    setInterval(function() {
              document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px';
           }, 100);
   }
  
  }
  // text end
  
  // IGNORE BELOW CODE 
  
  (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.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();
                  };
              });
          };        
      };
  }(jQuery));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
   background: silver;
   position: relative;
   overflow:hidden;
  }
  
  .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;
   color: #FFF;
   white-space: pre;
  }
  
  .txtContainer:hover {
   position: absolute;
   background: red;
   white-space: pre;
  }
  
  .pip {
   display: inline-block;
   margin: 0;
   position: absolute;
  }
  
  .white_content {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 21%;
   height: 40%;
   padding: 16px;
   border: 16px solid orange;
   background-color: white;
   z-index: 1002;
   overflow: auto;
  }</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;body style="background : green"&gt;
  &lt;input id="fileup" name="fileup" type="file" style="display:none" &gt;
  
  &lt;div id="container"class="container"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Codepen : <a href="https://codepen.io/kidsdial/pen/wZYjbE" rel="nofollow noreferrer">https://codepen.io/kidsdial/pen/wZYjbE</a></p>