如何使用以下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>

​