Close The Other Pop-up When We Open One Pop-up

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 : Whe

Solution 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
     }
     }