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

鉴于您的代码，您需要做的就是使用按钮单击处理程序内的Messaging API向窗口发送消息。然后，您的事件监听器将执行receiveMessage函数并打开ruben-1的模型。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: