Simple Modal

by Elijah Tate

HTML

<div id="nav">
  <div id="opentem1" class="open">open 1</div>
  <div id="opentem2" class="open">open 2</div>
  <div id="opentem3" class="open">open 3</div>
</div>


<div id="modal">
  <div id="close">
    close
  </div>
  <div id="modalcont"></div>
</div>

<div id="template1" class="template1 temp"></div>
<div id="template2" class="template2 temp"></div>
<div id="template3" class="template3 temp"></div>

CSS

body {
  color: white;
}

.open {
  display: inline-block;
}

#close {
  background: red;
  width: 50px;
  height: 50px;
}

#opentem1 {
  background: red;
  width: 50px;
  height: 50px;
}

#opentem2 {
  background: blue;
  width: 50px;
  height: 50px;
}

#opentem3 {
  background: black;
  width: 50px;
  height: 50px;
}

#modal {
  width: 300px;
  height: 300px;
}

.template1 {
  display: none;
  background: red;
  width: 300px;
  height: 300px;
}

.template2 {
  display: none;
  background: blue;
  width: 300px;
  height: 300px;
}

.template3 {
  display: none;
  background: black;
  width: 300px;
  height: 300px;
}

JavaScript

var nav = $("#nav");
var close = $("#close");
var temp1 = $("#template1");
var temp2 = $("#template2");
var temp3 = $("#template3");

var modalcont = $("#modalcont");

var modals = {
  "opentem1": temp1,
  "opentem2": temp2,
  "opentem3": temp3
};
console.log("HELLO");

nav.on("click", ".open", function(e) {
  if (modalcont.is(":empty")) {
    console.log("CLICKED");
    var mytarget = $(e.target);
    var myId = mytarget.attr("id");

    var newTemp = $($(modals[myId]).clone());
    console.log("modal ID: " + newTemp.attr("id"));
    newTemp.attr("id", "temp1modal").css("display", "block").appendTo(modalcont);
  }

});

close.on("click", function(e) {
  console.log("I have been closed");
  modalcont.find(".temp").remove();
});