Javascript 如何使模态窗口在此代码中工作？

如果您能告诉我如何在这段代码中使用模态窗口，我将不胜感激。这应该是一台“报价机”。我打算做的是在表单元格中插入所有HTMLDOM元素。然后使用我的quote对象数组，借助随机数和for循环，尝试匹配最外层div中的电影名称，然后单击该specsific div，打开一个包含所述电影的quote的模式窗口

我想知道错误是否来自for循环，这意味着并非所有单元格都包含我的元素，或者我调用元素的方式是错误的

功能

function tbl () {
  var body = document.getElementsByTagName("body")[0];

  var tab = document.createElement("table");
  var tblBody = document.createElement("tbody");

  for (var i = 0; i < 5; i++) {
    var row = document.createElement("tr");
      for (var j = 0; j < 10; j++) {
        var cell = document.createElement("td");
        var domain = document.createElement("div")
        domain.setAttribute("id", "frame")
        domain.classList.add("popup")
        var text = document.createElement("p");
        var container = document.createElement("div")
        container.setAttribute("id", "myModal")
        container.classList.add("modal")
        var content = document.createElement("div")
        content.classList.add("modalcontent")
        var button = document.createElement("span")
        button.classList.add("close")

        content.appendChild(text)
        content.appendChild(button)
        container.appendChild(content)
        domain.appendChild(container)
        cell.appendChild(domain)
        row.appendChild(cell)
    }   
    tblBody.appendChild(row);   
  }
  button.innerHTML = "&times;"
  button.setAttribute("id", "myBtn")
  tab.appendChild(tblBody);
  body.appendChild(tab);
  tab.setAttribute("border", "2");
  tab.setAttribute("id", "myTable")  
  document.body.style.backgroundColor = "black";


  function win () {
     function Quotas (movie, char, quote) {
          this.movie = movie;
          this.char = char;
          this.quote = quote;
        }

        var Quote_Array = [new Quotas("Apollo 13", "Jim Lovell", "Houston, we have a problem."), new Quotas("Dead Poets Society", "John Keating", "Carpe diem. Seize the day, boys. Make your lives extraordinary."), new Quotas("Star Wars: A New Hope", "Obi-Wan Kenobi", "These are not the droids you're looking for."), new Quotas("The Wizard of Oz", "Dorothy Gale", "There's no place like home."), new Quotas("The Godfather", "Calo", "In Sicily, women are more dangerous than shotguns."), new Quotas("The Godfather", "Sollozzo", "I don't like violence, Tom. I'm a businessman; blood is a big expense."), new Quotas("The Lord of the Rings: The Return of the King", "Gimli", "Certainty of death. Small chance of success. What are we waiting for?"), new Quotas("The Lord of the Rings: The Return of the King", "Witch King", "Do not come between the Nazgul and his prey."), new Quotas("The Lord of the Rings: The Return of the King", "Legolas", "The way is shut. It was made by those who are dead, and the dead keep it. The way is shut."), new Quotas("The Lord of the Rings: The Return of the King", "Galadriel", "This task was appointed to you, Frodo of the Shire. If you do not find a way, no one will."), new Quotas("The Good, the Bad and the Ugly", "Blondie", "You see, in this world there's two kinds of people, my friend: Those with loaded guns and those who dig. You dig."), new Quotas("The Good, the Bad and the Ugly", "Tuco", "I'm looking for the owner of that horse. He's tall, blonde, he smokes a cigar, and he's a pig!"), new Quotas("Star Wars: The Empire Strikes Back", "Yoda", "Control, control, you must learn control!"), new Quotas("Star Wars: The Empire Strikes Back", "Darth Vader", "Luke, you can destroy the Emperor. He has foreseen this. It is your destiny. Join me, and together we can rule the galaxy as father and son.")]


    for (var k = 0; k < 5; k++) {
      var x = document.getElementById("myTable").rows[k].cells;
      for(var l = 0; l < 10; l++) {
        var rnd = Math.floor(Math.random() * 14)

        x[l].getElementsByTagName("p").innerHTML = rnd
        x[l].children[0].innerHTML = Quote_Array[rnd].movie  



        var mod = domain.getElementsByClassName('modal')[0];
        var btn = document.getElementsByClassName("popup")[0]
        var span = document.getElementsByClassName("close")[0]
        var tape = document.getElementById("myTable").rows[k].cells[l]
        tape.onclick = function() {
            mod.style.display = "block";
        }
        span.onclick = function() {
            mod.style.display = "none";
        }
        window.onclick = function(event) {
            if (event.target == mod) {
            mod.style.display = "none";
            }
        }

      }  
    } 
  } win()  
};

函数tbl（）{
var body=document.getElementsByTagName（“body”）[0]；
var tab=document.createElement（“表”）；
var tblBody=document.createElement（“tbody”）；
对于（变量i=0；i<5；i++）{
var行=document.createElement（“tr”）；
对于（var j=0；j<10；j++）{
var cell=document.createElement（“td”）；
var domain=document.createElement（“div”）
domain.setAttribute（“id”，“frame”）
domain.classList.add（“弹出窗口”）
var text=document.createElement（“p”）；
var container=document.createElement（“div”）
container.setAttribute（“id”、“myModal”）
container.classList.add（“模态”）
var content=document.createElement（“div”）
content.classList.add（“modalcontent”）
var按钮=document.createElement（“span”）
按钮。类列表。添加（“关闭”）
content.appendChild（文本）
content.appendChild（按钮）
container.appendChild（内容）
domain.appendChild（容器）
cell.appendChild（域）
行。追加子项（单元格）
}   
tblBody.appendChild（世界其他地区）；
}
button.innerHTML=“×；”
button.setAttribute（“id”、“myBtn”）
tab.追加子项（tblBody）；
body.appendChild（选项卡）；
tab.setAttribute（“边框”、“2”）；
tab.setAttribute（“id”、“myTable”）
document.body.style.backgroundColor=“黑色”；
函数win（）{
功能配额（电影、字符、引用）{
这部电影=电影；
this.char=char；
this.quote=quote；
}
var Quote_Array=[新配额（“阿波罗13号”、“吉姆·洛弗尔”、“休斯顿，我们有个问题”）；新配额（“死亡诗人协会”、“约翰·基廷”、“卡佩·迪姆。抓住每一天，孩子们。让你们的生活与众不同”）；新配额（“星球大战：新希望”、“欧比-万·克诺比”，“这些不是你们要找的机器人”）；新配额（“绿野仙踪”，新配额（“教父”，“卡罗”，“在西西里，女人比猎枪更危险”）、新配额（“教父”，“索洛佐”，“我不喜欢暴力，汤姆。我是一个商人；流血是一笔巨大的开支”）、新配额（“指环王：国王的回归”，“金姆利””死亡的必然性。成功的机会很小。我们在等待什么？），新配额（“指环王：国王的回归”，“巫婆王”，“不要夹在纳兹古尔和他的猎物之间。”），新配额（“指环王：国王的回归”，“莱格拉斯”这条路是封闭的。它是由死去的人创造的，死去的人保留着它。这条路是封闭的。”），新配额（“指环王：国王的回归”，“盖拉德里尔”，“这项任务是指派给你的，夏尔的佛罗多。如果你找不到路，没有人会。”），新配额（“好的，坏的和丑陋的”，“金发女郎”你看，在这个世界上有两种人，我的朋友：带枪的人和挖东西的人。你挖。”），新配额（“好的、坏的和丑陋的”，“图科”，“我在找那匹马的主人。他高高的，金发碧眼，抽雪茄，他是头猪！”），新配额（“星球大战：帝国反击”，“尤达”控制，控制，你必须学会控制！”），新配额（“星球大战：帝国反击”，“达斯·维德”，“卢克，你可以摧毁皇帝。他预见到了这一点。这是你的命运。加入我，我们可以一起作为父子统治银河。”）
对于（var k=0；k<5；k++）{
var x=document.getElementById（“myTable”）.rows[k]。单元格；
对于（var l=0；l<10；l++）{
var rnd=Math.floor（Math.random（）*14）
x[l].getElementsByTagName（“p”）.innerHTML=rnd
x[l]。子项[0]。innerHTML=Quote_数组[rnd]。电影
var mod=domain.getElementsByClassName（'modal'）[0]；
var btn=document.getElementsByClassName（“弹出”）[0]
var span=document.getElementsByClassName（“关闭”）[0]
var tape=document.getElementById（“myTable”）.rows[k].cells[l]
tape.onclick=function（）{
mod.style.display=“块”；
}
span.onclick=函数（）{
mod.style.display=“无”；
}
window.onclick=函数（事件）{
如果（event.target==mod）{
mod.style.display=“无”；
}
}
}  
} 
}赢（）
};

CSS

<style>
    td {
  position: relative;
  padding: 50px 54px 50px 54px;
  border-width: 5px;
  overflow: visible;
}


table {
  table-layout: fixed;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-style: outset;
  border-color: grey; 
  z-index: -1;
}

.popup {
  position: absolute;
  display: block;
  cursor: pointer;
  color: white;
  padding: auto;
  vertical-align: middle;
  bottom: 25%;
  right: 0%;
  float: left;
  text-align: center;
  font-family: "Russo One";
  z-index: 2;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modalcontent {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

</style>

运输署{
位置：相对位置；
填充：50px 54px 50px 54px；
边框宽度：5px；
溢出：可见；
}
桌子{
表布局：固定；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
身高：100%；
宽度：100%；
边界样式：开始；
边框颜色：灰色；
z指数：-1；
}
.弹出窗口{
位置：绝对位置；
显示：块；
光标：指针；
颜色：白色；
填充：自动；
垂直对齐：中间对齐；
底部：25%；
右：0%；
浮动：左；
文本对齐：居中；
字体系列：“Russo One”；
z指数：2；
}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：隐藏；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容/框*/
.modalcontent{
背景色
<html>
<head>
  <title>Quote Machine Pop-up Version</title>
  <link href='//fonts.googleapis.com/css?family=Russo One' rel='stylesheet'>
</head>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <body onload="tbl()">

        </body>
      </div>
    </div>
  </div>   
</hmtl>