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

嘿，伙计们，我需要一点帮助。 因此，我的页面上隐藏着模态框，当我使用视频平台单击它们时，它们工作得非常好

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

以下是示例：

以下是我的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;

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

（函数（）{
（功能（）{
window.onload=函数（）{
var frame=document.getElementsByName（“verse iframe”）[0].contentWindow；
//下面的变量（即“menu-1”）引用标记中的div id
函数接收消息（事件）{
var data=（typeof event.data==“String”）？JSON.parse（event.data）：事件
var modalWindow1=document.getElementById（“ruben-1”）；
var modalWindow2=document.getElementById（“ruben-2”）；
var modalWindow3=document.getElementById（“菜单-3”）；
var modalWindow4=document.getElementById（“菜单-4”）；
//下面的变量（即“menu-1”）引用在Verse编辑器中为热点输入的唯一回调名称
如果（数据数据[“标识符”]=“鲁本-1”）{
modalWindow1.style.display=“block”；
}
如果（数据数据[“标识符”]=“鲁本-2”）{
modalWindow2.style.display=“block”；
}
if（数据数据[“标识符”]=“菜单-3”）{
modalWindow3.style.display=“block”；
}
if（数据数据[“标识符”]=“菜单-4”）{
modalWindow4.style.display=“block”；
}
}
var closeBtns=document.getElementsByClassName（“模式关闭”）；
对于（变量i=0；i

给定代码，只需使用按钮单击处理程序中的消息API向窗口发送消息即可。 然后，您的事件侦听器将执行

receiveMessage

功能，并为

ruben-1

打开您的模型

window.onload=（）=>{
document.querySelector（'[data modal=“ruben-1”]'）。addEventListener（“单击”，（e）=>{
让postData={
标识符：e.target.dataset.modal
};
window.postMessage（postData，“*”）；
});
window.addEventListener（'message'，m=>{
警报（m.data.identifier）；
});
}

---

Ruben-1视频

双IIFEs是怎么回事？里面有一个超负荷。。。在这段代码中，这些生活对你毫无帮助。同时重新说明

frame

。剪切粘贴小编辑的情况？嘿，兰迪，你说得对！我将删除双IIFEs，而且“框架”声明只是从SublimiteText中剪切粘贴的。嘿，Randy，我删除了额外的IIFEs和“框架声明”。我应该把上面的代码放在哪里？我是否应该将ID#添加到调用我的模式框中？您说过要“单击一个按钮”来启动模式，因此此代码将进入该按钮的“单击”处理程序。我将更新我的示例以包含一个代表按钮。谢谢Randy，我非常感谢您的帮助！：p由于某种原因，当我将：document.querySelector（'[data modal=“ruben-1”]'）.addeventlistener（“单击“，（e）=>{let postData={标识符：e.target.dataset.modal}；window.postMessage（postData，“*”）；}放入时，它不起作用在window.onload中，它会自动打开弹出窗口，而无需我单击按钮。我不知道该告诉您什么。请查看我刚才添加到答案中的示例，并比较您的代码。这是您应该期望的。