Hide Pop up onclick Outside

Question

Once click on Text, we are displaying Pop up box....

Requirement :

When user click on outside popup, i am trying to hide the pop up here : https://codepen.io/kidsdial/pen/VNxMYO ....

Issue :

For that I tried below code , but after that when i tried to change font-family through dropdown, then popup will close....

$(document).mouseup(function(e) 
    {
        var container = $('.white_content');

        if (!container.is(e.target) && container.has(e.target).length === 0) 
        {
            container.hide();           
            $('.font-select').css('display', 'none'); 
        }
    }); 

$(document).mouseup(function(e) 
 {
     var container = $('.dark_content');

     // if the target of the click isn't the container nor a descendant of the container
     if (!container.is(e.target) && container.has(e.target).length === 0) 
     {
         container.hide();
     }
 });
 
// close text pop up onclick outside

$(document).mouseup(function(e) 
 {
     var container = $('.white_content');

     // if the target of the click isn't the container nor a descendant of the container
     if (!container.is(e.target) && container.has(e.target).length === 0) 
     {
         container.hide();
     }
 }); 

 // end


 //font color
 var className;

 function changeColor(data) {
  var color = $(data).css('background-color');
  var changeColor = $(className).css('color', color);
 }

 //font color end

 // 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)
  }


  var styleTop = el.style.top;
  var styleLeft = el.style.left;

  styleTop = parseInt(styleTop.substring(3 , -1)) + 130;
  styleLeft = parseInt(styleLeft.substring(3 , -1)) + 30;

  $('.font-select:first').css({
   display: 'block',
   left: styleLeft + 'px',
   top: styleTop + 'px',
   zIndex: 1010
  });

  //font color

  var colorID = el.id.substring(5);
  className = '#' + colorID;

  //font color end

  el.style.display = 'block';
  openID = el;
 }

 function fontRange(e) {
  var element = e.parentElement.id;
  element = "#edit_" + element.split("_")[1];
  $(element).css('font-size', e.value + 'px');
 }

 let openID = null;

 var target;
 const imageUrl = "https://i.imgur.com/RzEm1WK.png";

 let jsonData =  {
  "path" : " fb post\/",
  "info" : {
    "author" : "",
    "keywords" : "",
    "file" : "fb post",
    "date" : "sRGB",
    "title" : "",
    "description" : "Normal",
    "generator" : "Export Kit v1.2.8"
  },
  "name" : "fb post",
  "layers" : [
    {
      "x" : 0,
      "height" : 789,
      "layers" : [
        {
          "x" : 0,
          "color" : "0xFF606D",
          "height" : 789,
          "y" : 0,
          "width" : 940,
          "shapeType" : "rectangle",
          "type" : "shape",
          "name" : "bg_rectangle_1"
        },
        {
          "x" : 0,
          "height" : 788,
          "layers" : [
            {
              "x" : 0,
              "height" : 788,
              "src" : "2627e475d59546ec8522df6f89713867_frame0.png",
              "y" : 0,
              "width" : 506,
              "type" : "image",
              "name" : "bg_image"
            }
          ],
          "y" : 0,
          "width" : 506,
          "type" : "group",
          "name" : "user_image_1"
        },
        {
          "x" : 465,
          "height" : 411,
          "src" : "5faf41823c9ccd92485912c6fa6befcc_frame1.png",
          "y" : 206,
          "width" : 443,
          "type" : "image",
          "name" : "shape_1"
        },
        {
          "x" : 228,
          "height" : 150,
          "src" : "724c7c5b06fae34d68633c349ccb752a_frame2.png",
          "y" : 609,
          "width" : 175,
          "type" : "image",
          "name" : "shape_2"
        },
        {
          "justification" : "center",
          "font" : "Coustard",
          "x" : 576,
          "y" : 294,
          "src" : "db4922cce0cd771c28fe5c818ae313e4_Font249.ttf",
          "width" : 221,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 67,
          "text" : "BE MY",
          "height" : 50,
          "name" : "edit_be"
        },
        {
          "justification" : "center",
          "font" : "Coustard",
          "x" : 570,
          "y" : 561,
          "src" : "db4922cce0cd771c28fe5c818ae313e4_Font249.ttf",
          "width" : 236,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 37,
          "text" : "READ MORE",
          "height" : 28,
          "name" : "edit_read"
        },
        {
          "justification" : "center",
          "font" : "Coustard-Black",
          "x" : 549,
          "y" : 353,
          "src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
          "width" : 276,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 67,
          "text" : "VALEN",
          "height" : 51,
          "name" : "edit_valen"
        },
        {
          "justification" : "center",
          "font" : "Coustard-Black",
          "x" : 533,
          "y" : 411,
          "src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
          "width" : 306,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 104,
          "text" : "TINE",
          "height" : 80,
          "name" : "edit_tine"
        },
        {
          "justification" : "center",
          "font" : "Coustard-Black",
          "x" : 274,
          "y" : 641,
          "src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
          "width" : 74,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 23,
          "text" : "SAVE",
          "height" : 17,
          "name" : "edit_save"
        },
        {
          "justification" : "center",
          "font" : "Coustard-Black",
          "x" : 274,
          "y" : 665,
          "src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
          "width" : 71,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 28,
          "text" : "THE",
          "height" : 21,
          "name" : "edit_the"
        },
        {
          "justification" : "center",
          "font" : "Coustard-Black",
          "x" : 274,
          "y" : 693,
          "src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
          "width" : 72,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 22,
          "text" : "DATE",
          "height" : 17,
          "name" : "edit_date"
        }
      ],
      "y" : 0,
      "width" : 940,
      "type" : "group",
      "name" : "fb_post_4"
    }
  ]
};

 const containerElement = $('#container');
 const fileUp = $('#fileup');

 $(function() {

  // below code will upload image onclick mask image

  containerElement.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 >= canvasLeft && absX <= canvasLeft + bbox.width &&
      absY >= canvasTop && absY <= 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(fileUp.click.bind(fileUp), 20);
    }
   })
  });

  // Below code will fetch mask images from json file

  function getAllSrc(layers) {
   let arr = [];
   layers.forEach(layer => {
    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 > 0) {
      newArr.forEach(({
           src,
           x,
           y,
           height,
           width,
           name
          }) => {
       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 = [];

   containerElement.css('width', width + "px").css('height', height + "px").addClass('temp');

   for (let {
    src,
    x,
    y,
    name
   } of arr) {


    //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 = '';
          // click work only on mask image
           $('.masked-img').css('pointer-events', 'none');
          // click end
    }
    //code end

    var mask = $(".container").mask({
     imageUrl: imageUrl1,
     maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + 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) {
      $("<span class=\"pip pip" + newImageLoadedId + "\">" +
        "<a onclick='document.getElementById(\"dark" + newImageLoadedId + "\").style.display=\"block\";'><span class=\"edit edit" + newImageLoadedId + "\" >Edit </span></a>" +
        "</span>").insertAfter(".masked-img" + newImageLoadedId).css({
       "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
       "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2) + "px"
      });;
      $("<div id=\'dark" + newImageLoadedId + "\' class=\'dark_content\'>" +
        $('#demoTemplate').html() +
        "<a href=\"javascript:void(0)\" onclick=\"document.getElementById(\'dark" + newImageLoadedId + "\').style.display=\'none\'\">Close</a>" + "</div>").appendTo(".pip" + newImageLoadedId).css({
       "left": $('.edit' + newImageLoadedId).width() + 2 + "px",
       "top": "0px"
      });

     }
     // Edit code end here....
     //  Remove image

     $("<br/><span id=\"" + newImageLoadedId + "\" class=\"remove\">Remove</span>").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

 //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(
     '<input id="font" style="display:none"><a id ="' + layer.name + '" onclick="openPopUp(' + lightId + ')"' +
     '<div class="txtContainer" id = "text" contenteditable="true" ' +
     'style="' +
     'left: ' + layer.x + 'px; ' +
     'top: ' + layer.y + 'px; ' +
     'font-size: ' + layer.size + 'px; ' +
     '">' + layer.text + '</div></a>' +
     '<div id="light' + layer.name + '" class="white_content" style="' +
     'left: ' + layer.x + 'px; ' +
     'top: ' + layer.y + 'px; ' + '"> ' +
     $('#template2').html() +
     '<a href="javascript:void(0)" onclick="closePopUp(' + lightId + ')">Close</a></div> <div>'
   );
   document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'
   // Above is POP UP Code
  }

 }
 // text end

 // images drag

 (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] > 0
    });

    JQmasks.forEach(function(el) {
     var id  
     = item.length > 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 && $(canvas).attr("active") === "true") {
       var x = settings.x + evt.clientX - prevX;
       var y = settings.y + evt.clientY - prevY;
       if (x == settings.x && 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) => {
     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 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
     settings.y = settings.y == 0 && 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 = $("<div/>", {
     "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));

 //Zoom in , Zoom out , Rotate code

 document.getElementById("img").src = json(data);

 var angle = 0;
 var scale = 1;
 var $img = $('#image');

 $img.on('transform', function() {
  $img.css('transform', `rotate(${angle}deg) scale(${scale})`);
 });

 $('.js-rotate-right').on('click', function() {
  angle += 15;
  $img.trigger('transform');
 });

 $('.js-rotate-left').on('click', function() {
  angle -= 15;
  $img.trigger('transform');
 });

 $('.js-zoom-in').on('click', function() {
  scale += 0.25;
  if (scale == 2.25) {
   scale = 2;
  };
  $img.trigger('transform');
 });

 $('.js-zoom-out').on('click', function() {
  scale -= 0.25;
  if (scale == 0) {
   scale = 0.25;
  }
  $img.trigger('transform');
 });

.container {
   background: silver;
   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;
  }

  .radiobutton {
   display: inline-block;
   position: relative;
   width: 50px;
   height: 50px;
   margin: 10px;
   cursor: pointer;
  }

  .radiobutton span {
   display: block;
   position: absolute;
   width: 50px;
   height: 50px;
   padding: 0;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   border-radius: 100%;
   background: #eeeeee;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
   transition: ease .3s;
  }

  .radiobutton span:hover {
   padding: 10px;
  }

  .orange .radiobutton span {
   background: #FF5722;
  }

  .red .radiobutton span {
   background: #FFC107;
  }

  .radiocolor {
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: transparent;
   /*transition: ease .3s;*/
   z-index: -1;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/fontselect.css" />
<script src="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/jquery.fontselect.js"></script>

<style>
  .font-select {
   display: none;
  }
</style>

<input id="fileup" name="fileup" type="file" style="display:none" >


<div id="container"class="container">
</div>

<template id='demoTemplate'>
   <span>
      <div class="btn-group">
         <button type="button" class="js-zoom-in">Zoom In</button>
         <button type="button" class="js-zoom-out">Zoom Out</button>
         <button type="button" class="js-rotate-right">Rotate Right</button>
         <button type="button" class="js-rotate-left">Rotate Left</button>
      </div>
      <img id="image" src ="" style ="display:none">             
   </span>
</template>

<template id='template2'>
   <input type="range" min="60" max="90" oninput="fontRange(this)" onchange="fontRange(this)">
   <label class="orange">
      <input type="radio" name="color" value="orange" style="display:none" >
      <div class="radiocolor"></div>
      <div class="radiobutton"><span onclick="changeColor(this)"></span></div>
   </label>
   <label class="red">
      <input type="radio" name="color" value="red" style="display:none" >
      <div class="radiocolor"></div>
      <div class="radiobutton"><span onclick="changeColor(this)"></span></div>
   </label>
   <script>

$(function() {
   $('#font').fontselect().change(function() {

    // replace + signs with spaces for css
    var font = $(this).val().replace(/\+/g, ' ');

    // split font into family and weight
    font = font.split(':');

    // set family on paragraphs
    $('p').css('font-family', font[0]);
   });

   $('.font-select').click(function (index) {
    var targetFontFamily = index.target.style.fontFamily;
    var targetFontWeight = index.target.style.fontWeight;
    $(className).css({
     fontFamily: targetFontFamily,
     fontWeight: targetFontWeight
    });
   })
  });
    
</script>
   
   
</template>

Answer 1

Nothing to do, simply add your dropdown class to your container var and your problem solved

var container = $('.white_content, .font-select');

now when you select your dropdown, pop-up not closing

Answer 2

EDIT:
In response to comments, one further suggestion, specific to the code posted in the question, is to try:

document.addEventListener("input", closePopup);
function closePopup(event){
  if(event.target == document.getElementById("font")){
    console.log("font changed");
    popup.style.display = "none"; // `popup` must have a reference to the popup 
  }
}

When the hidden input element with the id font receives input (presumably from the user making a selection in one of the "dropdowns"), the popup should close -- although I have not been able to test this.

---

Edit 2:
And another, if the problem is that dropdown only exists in a template element and you need a local copy that you can use in the document, is to make a copy with Node.cloneNode:

// Copy the template's content
const templateElement = document.getElementById("templateForDropdown"),
      originalDropdown = templateElement.content, // It's in the .content property
      copyOfDropdown = originalDropdown.cloneNode(true); // `true` clones descendants
copyOfDropdown.id = "dropdown1"; // Don't use the same `id` twice

// Add the copy to the DOM
const container = document.getElementById("container");
container.appendChild(copyOfDropdown);

console.log("(You have to click 'full-page' to properly view the SO snippet results)");
console.log(container.outerHTML);

#container{ width: 120px; height: 100px; border: 1px solid grey; padding:  10px 20px 60px 20px; }

<template id="templateForDropdown">
  <select id="dropdown0">
    <option>1</option>
    <option>2</option>
  </select>
</template>

<div id="container">
  <h4>Dropdown...</h4>
</div>

(...or if the template is in another document or in an iframe, you'd need Document.importNode().)

---

Original answer:
This should give you an idea of how to show a popup that can be hidden again by clicking outside of it. (The else ... if part ensures that clicking the dropdown or its children does not close the popup.) Feel free to modify it to suit your purpose.

// Select particular elements
const button = document.getElementById("button");
const popup = document.getElementById("popup");
const dropdown = document.getElementById("dropdown");

// Listen for clicks
document.addEventListener("click", togglePopup);

// Respond to clicks
function togglePopup(event){
  // Show popup when user clicks button
  if(event.target == button){
    popup.style.display = "block";
  }
  // Otherwise...
  else {
    // ... As long as the click is not on dropdown or its children...
    if(event.target != dropdown && event.target.parentNode != dropdown){
      // ... close the popup
      popup.style.display = "none";
    }
  }
}

#popup{ display: none; }
#container{ border: 1px solid grey; padding: 10px 20px 80px 20px; }

<div id="container">
<div id="popup">I'm a popup</div>
<br />
<button id="button">Show Popup</button>
<br /><br />
<select id="dropdown">
  <option>1</option>
  <option>2</option>
</select>
</div>