Refactored Dialog boxes so that an infinite amount can be opened

utils/DialogBox.js

@@ -2,53 +2,55 @@
 
 //Close dialog box when clicking outside
 $(document).click(function(event) {
-    if (dialogBoxOpened) {        
-        if ( $(event.target).closest(".dialog-box").get(0) == null ) {         
-            dialogBoxClose();         
+    if (dialogBoxOpened) {
+        if (!$(event.target).closest('.dialog-box-container').length){
+            --dialogBoxCount;
+            $(".dialog-box-container").remove();
+            if (dialogBoxCount == 0) {
+                dialogBoxOpened = false;
+            }
+        }
+    }
+});
+
+//Dialog box close buttons
+$(document).on('click', '.dialog-box-close-button', function( event ) {
+    console.log("clicked close button");
+    if (dialogBoxOpened) {
+        $(this).closest('.dialog-box-container').remove();
+        --dialogBoxCount;
+        if (dialogBoxCount == 0) {
+            dialogBoxOpened = false;
         }
     }
 });
 
 var dialogBoxOpened = false;
-function dialogBoxInit() {
-    var closeButton = document.getElementById("dialog-box-close-button");
+var dialogBoxCount = 0;
+
+dialogBoxCreate = function(txt) {
+    console.log("created");
+    var container = document.createElement("div");
+    container.setAttribute("class", "dialog-box-container");
+    
+    var content = document.createElement("div");
+    content.setAttribute("class", "dialog-box-content");
+    
+    var closeButton = document.createElement("span");
+    closeButton.setAttribute("class", "dialog-box-close-button");
+    closeButton.innerHTML = "×"
+    
+    var textE = document.createElement("p");
+    textE.innerHTML = txt;
+    
+    content.appendChild(closeButton);
+    content.appendChild(textE);
+    container.appendChild(content);
+    
+    document.body.appendChild(container);
     
-    //Close Dialog box
-    closeButton.addEventListener("click", function() {
-        dialogBoxClose();
-        return false;
-    });
-};
-
-document.addEventListener("DOMContentLoaded", dialogBoxInit, false);
-
-dialogBoxClose = function() {
-    dialogBoxOpened = false;
-    var dialogBox = document.getElementById("dialog-box-container");
-    dialogBox.style.display = "none";
-}
-
-dialogBoxOpen = function() {
-    var dialogBox = document.getElementById("dialog-box-container");
-    dialogBox.style.display = "block";
     setTimeout(function() {
         dialogBoxOpened = true;
+        ++dialogBoxCount;
     }, 500);
-    
-}
-
-dialogBoxSetText = function(txt1, txt2="", txt3="", txt4="") {
-    var dialogBoxText1 = document.getElementById("dialog-box-text-1");
-    var dialogBoxText2 = document.getElementById("dialog-box-text-2");
-    var dialogBoxText3 = document.getElementById("dialog-box-text-3");
-    var dialogBoxText4 = document.getElementById("dialog-box-text-4");
-    dialogBoxText1.innerHTML = txt1;
-    dialogBoxText2.innerHTML = txt2;
-    dialogBoxText3.innerHTML = txt3;
-    dialogBoxText4.innerHTML = txt4;
-}
-
-dialogBoxCreate = function(txt1, txt2="", txt3="", txt4="") {
-    dialogBoxSetText(txt1, txt2, txt3, txt4);
-    dialogBoxOpen();
 }