How to make the modal window work in this code?

Question

I really appreciate if you show me how to make the modal window work in this code. This is supposed to be a "quote machine". What i intended to do is to insert all the html dom elements inside the table cells. Then with my quote object array and with the help of the random numbers and for loops trying to match movie names in the outermost divs and after clicking that spesific div, opening a modal window which contains the quote from the said movie.

I wonder if the mistake comes from the for loop which means not all cells contains my elements or am i calling elements in a wrong way.

FUNCTION

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

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>

HTML

<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>

Answer 1

It looks like the problem came when you insert the preview content to the individual cells. Instead of having its own container, it appends directly to the td element, thus removing the entire children which is the modal container.

You will first need to declare a separated element for the preview, in this example i've created a preview panel.

Also, I've noticed the .modalcontent is having a white color for its content. Try to change it to something else.

The last thing is to rework the modal behavior. All you need is to move the modal callback blocks inside the tape.onclick function so we have the correct cell reference to the individual cells.

 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 preview = document.createElement("div"); preview.classList.add("preview") 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(preview) 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].querySelectorAll(".preview")[0].innerHTML = Quote_Array[rnd].movie; x[l].querySelectorAll(".modalcontent > p")[0].innerHTML = Quote_Array[rnd].quote; var tape = document.getElementById("myTable").rows[k].cells[l]; tape.onclick = function() { var mod = this.getElementsByClassName('modal')[0]; var btn = this.getElementsByClassName("popup")[0]; var span = this.getElementsByClassName("close")[0]; this.style.zIndex = 10; mod.style.display = "block"; span.onclick = function() { mod.style.display = "none"; } window.onclick = function(event) { if (event.target == mod) { tape.style.zIndex = 1; mod.style.display = "none"; } } } } } } win() };

 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%; color: #000000; /* 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; }

 <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> </html>