Pure JavaScript Modal

modal.js

(function() {

  // Example of how to initialize a modal
  // Include class [classname]_open on the trigger element for the modal (in the html)
  initModal("modal1", "Title", "Content", "Footer", backgroundColor = "blue", titleColor = "red");

  function initModal(classNm, title, content, footer, backgroundColor = "#5cb85c", titleColor = "white") {
    buildModal(classNm, title, content, footer);
    styleModal(classNm, backgroundColor, titleColor);
    activateModal(classNm);
  }

  function buildModal(classNm, title, content, footer) {
    // Make the modal div
    var myModal = document.createElement("div");
    myModal.className = classNm + "_modal";

    // Make the content div
    var modalContent = document.createElement("div");
    modalContent.className = classNm + "_modal-content";
    myModal.appendChild(modalContent);

    // Make the header div
    var modalHeader = document.createElement("div");
    modalHeader.className = classNm + "_modal-header";
    modalContent.appendChild(modalHeader);

    // Make the close button
    var close = document.createElement("span");
    close.className = classNm + "_close";
    var closeContent = document.createTextNode("X");
    close.appendChild(closeContent);
    modalHeader.appendChild(close);

    // Make the header content
    var modalHeaderContent = document.createElement("h2");
    var modalHeaderContentText = document.createTextNode(title);
    modalHeaderContent.appendChild(modalHeaderContentText);
    modalHeader.appendChild(modalHeaderContent);

    // Make the body div
    var modalBody = document.createElement("div");
    modalBody.className = classNm + "_modal-body";
    modalContent.appendChild(modalBody);

    // Make the body content
    var modalBodyContent = document.createElement("p");
    var modalBodyContentText = document.createTextNode(content);
    modalBodyContent.appendChild(modalBodyContentText);
    modalBody.appendChild(modalBodyContent);

    // Make the footer div
    var modalFooter = document.createElement("div");
    modalFooter.className = classNm + "_modal-footer";
    modalContent.appendChild(modalFooter);

    // Make the footer content
    var modalFooterContent = document.createElement("h3");
    var modalFooterContentText = document.createTextNode(footer);
    modalFooterContent.appendChild(modalFooterContentText);
    modalBody.appendChild(modalFooterContent);

    // Add the newly created element and its content into the DOM
    document.body.appendChild(myModal);
  }


  function styleModal(classNm, backgroundColor, titleColor) {
    // Build names
    var modal = classNm + "_modal";
    var modalContent = classNm + "_modal-content";
    var close = classNm + "_close";
    var modalHeader = classNm + "_modal-header";
    var modalBody = classNm + "_modal-body";
    var modalFooter = classNm + "_modal-footer";

    // Define a new stylesheet
    var sheet = (function() {
      // Create the <style> tag
      var style = document.createElement("style");

      // Add a media (and/or media query) here if you'd like!
      // style.setAttribute("media", "screen")
      // style.setAttribute("media", "only screen and (max-width : 1024px)")

      // WebKit hack :(
      style.appendChild(document.createTextNode(""));

      // Add the <style> element to the page
      document.head.appendChild(style);

      return style.sheet;
    })();

    // Define css rules here
    rules = ["\
      @-webkit-keyframes animatetop {\
          from {top:-300px; opacity:0}\
          to {top:0; opacity:1}\
      }",
      "@keyframes animatetop {\
          from {top:-300px; opacity:0}\
          to {top:0; opacity:1}\
      }",
      "." + modal + " {\
        display: none;\
        position: fixed;\
        z-index: 500;\
        padding-top: 100px;\
        left: 0;\
        top: 0;\
        width: 100%;\
        height: 100%;\
        overflow: auto;\
        background-color: rgb(0,0,0);\
        background-color: rgba(0,0,0,0.4);\
      }",
      "." + modalContent + " {\
        position: relative;\
        background-color: #fefefe;\
        margin: auto;\
        padding: 0;\
        border: 1px solid #888;\
        width: 80%;\
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\
        webkit-animation-name: animatetop;\
        webkit-animation-duration: 0.4s;\
        animation-name: animatetop;\
        animation-duration: 0.4s;\
      }",
      "." + close + "{\
        color: white;\
        float: right;\
        font-size: 28px;\
        font-weight: bold;\
        margin-top: 10px;\
      }",
      "." + close + ":hover {\
        color: #000;\
        text-decoration: none;\
        cursor: pointer;\
      }",
      "." + close + ":focus {\
        color: #000;\
        text-decoration: none;\
        cursor: pointer;\
      }",
      "." + modalHeader + "{\
        padding: 2px 16px;\
        background-color: " + backgroundColor + ";\
        color: " + titleColor + ";\
      }",
      "." + modalBody + "{\
        padding: 2px 16px;\
      }",
      "." + modalFooter + "{\
        padding: 2px 16px;\
        background-color: " + backgroundColor + ";\
        color: white;\
      }"];
    // Add rules to new stylesheet
    for(i=0; i < rules.length; i++) {
      sheet.insertRule(rules[i], sheet.cssRules.length);
    }
  }

  function activateModal(classNm) {
    // Get the modal
    var modal = document.getElementsByClassName(classNm + "_modal")[0];

    // Get the items that open the modal
    var btn = document.getElementsByClassName(classNm + "_open")[0];

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName(classNm + "_close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
      modal.style.display = "block";
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

    // When the user clicks anywhere on the modal, outside of the content close it
    window.onclick = function(event) {
      if (/(.)*_modal$/.test(event.target.className)) {
        event.target.style.display = "none";
      }
    }
  }

})();