javascript - CesiumJS - 使用带有广告牌的弹出窗口？

Question

我最近一直在做一个 CesiumJS 项目，并且我已经成功地在我的地球上实现了广告牌。当用户单击其中一个广告牌时，我想将它们带到特定网站。这显示在代码中：

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);

但是，我想要发生的是，当用户单击广告牌时，会在弹出窗口中显示一个带有该链接网站的模式弹出窗口。我有 javascript 代码在 html 页面上实现它：

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

但是，我很难理解如何使这两个代码块一起工作。因此，当用户单击广告牌时，模式弹出窗口应显示与该广告牌关联的网站。

有谁可以帮助我了解如何进行这项工作？

提前致谢，

Ĵ

标签： javascripthtmlcssmodal-dialogcesium