close the other pop-up when we open one pop-up

Question

Background :

We have Many lines in page , once we click on each line, we are displaying pop up....

Requirement :

Short : close the other pop-up when we open one pop-up

Long : When we click on 1st line, then its displaying 1st pop up , now when we click on 2nd or 3rd or any other line, it should close 1st pop up & display the other pop up ....

This is working fine if we have only two lines as in Codepen1 , but if we have more than two lines, its not closing other pop up as in Codepen2 ....

I tried this below code :

document.querySelector(\'.white_content:not(' + lightIdString + ')\').style.display=\'none\'

Code snippet :

 var target; var imageUrl = "https://i.imgur.com/RzEm1WK.png"; let jsonData = { "layers" : [ { "x" : 0, "height" : 789, "layers" : [ { "justification" : "center", "font" : "Coustard", "x" : 276, "y" : 94, "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" : 270, "y" : 361, "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" : 249, "y" : 153, "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" : 233, "y" : 211, "src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf", "width" : 306, "type" : "text", "color" : "0xFFFFFF", "size" : 104, "text" : "TINE", "height" : 80, "name" : "edit_tine" } ], "y" : 0, "width" : 940, "type" : "group", "name" : "fb_post_4" } ] }; $(document).ready(function() { // get the text from json function getAllSrc(layers) { let arr = []; layers.forEach(layer => { if (layer.src) { arr.push({ src: layer.src, x: layer.x, y: layer.y, name: layer.name }); } else if (layer.layers) { let newArr = getAllSrc(layer.layers); if (newArr.length > 0) { newArr.forEach(({ src, x, y, name }) => { arr.push({ src, x: (layer.x + x), y: (layer.y + y), 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'); if (name.indexOf('mask_') !== -1) { var imageUrl1 = imageUrl; } else { var imageUrl1 = ''; } var mask = $(".container").mask({ imageUrl: imageUrl1, maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + src, onMaskImageCreate: function(img) { img.css({ "position": "absolute", "left": x + "px", "top": y + "px" }); }, id: counter }); table.push(mask); fileup.onchange = function() { let mask2 = table[target]; mask2.loadImage(URL.createObjectURL(fileup.files[0])); document.getElementById('fileup').value = ""; }; counter++; // get the text } 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( '<a id ="' + layer.name + '" onclick="document.getElementById(\\'' + lightId + '\\').style.display=\\'block\\'; ' + 'document.querySelector(\\'.white_content:not(' + lightIdString + ')\\').style.display=\\'none\\';" ' + '<div class="textcontainer" 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; ' + '"> content <a href="javascript:void(0)" ' + 'onclick="document.getElementById(\\'light' + layer.name + '\\').style.display=\\'none\\';">Close</a></div> <div>' ); document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px' // Above is POP UP Code } } // extempl code 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) => { 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)); 

 .temp {} .container { background: gold; position: relative; } .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; } .masked-img { overflow: hidden; position: relative; } .textcontainer { position: absolute; text-align: center; color: #FFF } .textcontainer:hover { background: red; padding: 1px; border-style: dotted; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="fileup" name="fileup" type="file" style="display:none"> <div class="container"> </div> 

Answer 1

Keep currently open lightID in openID and use following function to open and close the popup onClick of link for close and open. in openPopUp and closePopUp you will receive html element. define both function globally

  openID=null;//initial state 
 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;
     }
$('.container').append(
     '<a id ="' + layer.name + '" onclick="openPopUp('+lightID+')"' +
     '<div class="textcontainer" 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; ' + '"> content <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
     }
     }