js/bs-modal.js

   1 /**
   2  * Generate a bootstrap modal
   3  * Mandatory:
   4  * @param {string} title - The modal title
   5  * @param {string} body - HTML for the body
   6  * @param {string} footer - HTML for the footer
   7  *
   8  * Optional:
   9  * @param {string|null} size - the bootstrap size category for modals (sm, lg, xl). Default is null.
  10  * @param {boolean} static - whether or not to make the backdrop static, forcing the user to respond to the dialog. Default is false
  11  * @param {boolean} show - whether or not to automatically show the modal. Default is false.
  12  * @param {boolean} closebutton - display and allow the close button. Default is true.
  13  * @returns {string} returns the ID
  14  */
  15
  16 function bsModal(title, body, footer, size = null, static = false, show = false, closebutton = true)
  17 {
  18     /* generate a random number between 1000 and 90000 to use as an id */
  19     const min = 1000;
  20     const max = 90000;
  21     id = Date.now().toString(36); // base36 unique id
  22     ourSize = "";
  23     if (size)
  24         ourSize += "modal-" + size;
  25
  26     const m1 = document.createElement("div");
  27     const m2 = m1.cloneNode();
  28     const m3 = m1.cloneNode();
  29     const mHeader = m1.cloneNode();
  30     const mBody = m1.cloneNode();
  31     const mFooter = m1.cloneNode();
  32
  33     m1.classList.add("modal", "fade");
  34     m1.id = id;
  35     m1.role = "dialog";
  36     m1.ariaHidden = "true";
  37
  38     m2.classList.add("modal-dialog", "modal-dialog-centered");
  39     if (ourSize.length)
  40         m2.classList.add(ourSize);
  41
  42     m2.role = "document";
  43     m2.id = id + "-2";
  44
  45     m3.classList.add("modal-content");
  46     m3.id = id + "-3";
  47
  48     mHeader.classList.add("modal-header");
  49     mHeader.id = id + "-header";
  50     mHeader.innerHTML =`<h5 class="modal-title" id="` + id + `"-title">` + title + `</h5>`;
  51
  52     if (closebutton)
  53         mHeader.innerHTML +=   `<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  54                                 <span aria-hidden="true">&times;</span></button>`;
  55
  56     mBody.classList.add("modal-body");
  57     mBody.id = id + "-body";
  58     mBody.innerHTML = body;
  59
  60     mFooter.classList.add("modal-footer");
  61     mFooter.id = id + "-footer";
  62     mFooter.innerHTML = footer;
  63
  64     m1.appendChild(m2);
  65     m2.appendChild(m3);
  66     m3.appendChild(mHeader);
  67     m3.appendChild(mBody);
  68     m3.appendChild(mFooter);
  69
  70     document.body.append(m1);
  71
  72     if (static)
  73         $('#' + m1.id).modal({ backdrop: "static" });
  74
  75     if (show)
  76         $('#' + m1.id).modal('show');
  77
  78     return m1.id;
  79 }