src/assets/main.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

// showModal will create the modal structure the first time it is called.
var modal, modalContent;
const showModal = function() {
  if (!modal) {
    // make the modal
    const modalClose = document.createElement('span');
    modalClose.id = 'modal-close';
    modalClose.innerHTML = '&times;';

    modalContent = document.createElement('div');
    modalContent.id = 'modal-content';

    const modalBody = document.createElement('div');
    modalBody.id = 'modal-body';
    modalBody.appendChild(modalContent);
    modalBody.appendChild(modalClose);

    modal = document.createElement('div');
    modal.id = 'modal';
    modal.appendChild(modalBody);

    // add the modal to the document
    document.getElementsByTagName('body')[0].appendChild(modal);

    // setup modal functionality
    modalClose.onclick = function() {
        modal.style.display = "none";
    }
  }

  modalContent.innerHTML = '';
  for (var i = 0; i < arguments.length; i++) {
    modalContent.appendChild(arguments[i]);
  }
  modal.style.display = "block";

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
      window.onclick = undefined;
    }
  }
}

document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM loaded");
})