CesiumJS - using popup windows with billboards?

I've been working on a CesiumJS project for the last while and I've managed to implement billboards onto my globe. When the user clicks one of these billboards I want to take them to a specific website. This is shown in the code:

const viewer = new Cesium.Viewer('cesiumContainer');
 var example = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
        billboard: {
          image: "../images/example.png",
        },
      });
    example.linkForPick = 'https://www.example.com/';
          viewer.screenSpaceEventHandler.setInputAction(function(mouse) {
                var pickedObject = viewer.scene.pick(mouse.position);
                if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id.linkForPick)) {
                        window.open(pickedObject.id.linkForPick, "_self");
                }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

However, what I want to happen is that when the user clicks the billboard, a modal popup is displayed with that linked website in the popup. I have javascript code to implement this on a html page:

Javascript:

document.getElementById("link").onclick = function(e) {
      e.preventDefault();
      document.getElementById("popupdarkbg").style.display = "block";
      document.getElementById("popup").style.display = "block";
      document.getElementById('popupiframe').src = "http://example.com";
      document.getElementById('popupdarkbg').onclick = function() {
          document.getElementById("popup").style.display = "none";
          document.getElementById("popupdarkbg").style.display = "none";
      };
      return false;
    }

    window.onkeydown = function(e) {
        if (e.keyCode == 27) {
          document.getElementById("popup").style.display = "none";
          document.getElementById("popupdarkbg").style.display = "none";
          e.preventDefault();
          return;
        }
    }

HTML:

<div id="main">
    <a href="" id="link">Click me</a><br>
    </div>
    
    <div id="popup"><iframe id="popupiframe"></iframe></div>
    <div id="popupdarkbg"></div>

CSS:

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

However, I'm struggling to understand how to make these two blocks of code work together. So when the user clicks the billboard, the modal popup should display the website associated with that billboard.

Is anyone able to help me understand how to make this work?

Thanks in advance,

J