如何使用以下 javascript 代码触发模式框？

Question

大家好，我需要一点帮助。 所以我的页面上隐藏了模式框，当我使用视频平台 VERSE 点击它们时，它们可以完美运行。

我的问题是：如果我想从页面上的常规链接或按钮调用相同的模式框，如何调用它们。

示例如下： http://digitalfeast.com/clients/nccv/ncc-verse.html

这是我的 Javascript 代码：

(function() {
(function() {
  window.onload = function() {

    var frame = document.getElementsByName("verse-iframe")[0].contentWindow;

    // Variables below (i.e. "menu-1") reference div id from your markup
    function receiveMessage(event) {

      var data = (typeof event.data === "String") ? JSON.parse(event.data) : event
      var modalWindow1 = document.getElementById("ruben-1");
      var modalWindow2 = document.getElementById("ruben-2");
      var modalWindow3 = document.getElementById("menu-3");
      var modalWindow4 = document.getElementById("menu-4");

      // Variables below (i.e. "menu-1") reference the unique callback names entered for your hotspots in the Verse editor
      if (data.data["identifier"] === "ruben-1") {
        modalWindow1.style.display = "block";
      }
      if (data.data["identifier"] === "ruben-2") {
        modalWindow2.style.display = "block";
      }
      if (data.data["identifier"] === "menu-3") {
        modalWindow3.style.display = "block";
      }
      if (data.data["identifier"] === "menu-4") {
        modalWindow4.style.display = "block";
      }
    }

    var closeBtns = document.getElementsByClassName("modal-close");

    for (var i = 0; i < closeBtns.length; i++) {
      var btn = closeBtns[i];
      btn.onclick = function (event) {
        event.target.parentNode.parentNode.style.display = "none";
        frame.postMessage({action: "play"}, "*");
        };
    }

    window.addEventListener('message', receiveMessage);
    var frame = document.getElementsByName("verse-iframe")[0].contentWindow;

  };
}());
}());

Answer 1

根据您的代码，您需要做的就是使用按钮单击处理程序中的消息传递 API 向窗口发送一条消息。 然后，您的事件侦听器将执行 receiveMessage 函数并为 ruben-1 打开您的模型。

window.onload = () => {
  document.querySelector('[data-modal="ruben-1"]').addEventListener("click", (e) => {
    let postData = {
      identifier: e.target.dataset.modal
    };
    window.postMessage(postData, "*");
  });

  window.addEventListener('message', m => {
    alert(m.data.identifier);
  });
}

<button data-modal="ruben-1">Ruben-1 Video</button>