Custom modals as header injection for default Squarespace templates

sqs_modals.html

<script>
  // --
  // Enter Data Here

  var data = {
    header: "Title",
    paragraph: "Lorem ipsum..."
  }


  // --
  // Onload Handler

  function customOnload() {
    var links = [
      {
        a: document.querySelector("a[href='#modal']"),
        content: data
      }
    ]

    links.forEach(function (link) {
      try {
        link.a.addEventListener('click', function (e) {
          e.preventDefault()
          customModal(link.content)
        })
      } catch (e) { console.error(e) }
    })
  }


  // --
  // Add Onload Function to Trigger After DOM Load

  try {
    document.addEventListener('DOMContentLoaded', customOnload, false)
  } catch (e) {
    window.addEventListener('load', customOnload, false)
  }


  // --
  // Modal

  function customModal(content) {
    var html = '' +
        '<div class="modal">' +
          '<div class="close"></div>' +
          '<h3>' + content.header + '</h3>' +
          '<p>' + content.paragraph + '</p>' +
        '</div>'

    var wrapper = document.createElement('div')
    wrapper.classList.add('modal-wrapper')
    wrapper.innerHTML = html
    wrapper.addEventListener('click', function (e) {
      if (e.target.classList.contains('modal-wrapper') ||
          e.target.classList.contains('close')) {
        document.body.removeChild(wrapper)
      }
    })
    document.body.appendChild(wrapper)
  }
</script>

<style>
  .modal-wrapper {
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
  }
  
  .modal {
    position: relative;
    margin: auto;
    background: white;
    padding: 1.5em;
    padding: 5vw;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  
  @media(min-width: 600px) {
    .modal {
      padding: 5vw;
    }
  }
  
  .modal .close {
    position: absolute;
    top: 0.5em;
    top: 1vw;
    right: 0.5em;
    right: 1vw;
    width: 1.5em;
    height: 1.5em;
    opacity: 0.3;
    cursor: pointer;
  }
  .modal .close:hover {
    opacity: 1;
  }
  .modal .close::before,
  .modal .close::after {
    position: absolute;
    left: 50%;
    content: ' ';
    height: 100%;
    width: 1px;
    background-color: #333;
  }
  .modal .close::before {
    transform: rotate(45deg);
  }
  .modal .close::after {
    transform: rotate(-45deg);
  }
  
  .modal p {
    max-width: 20em;
  }
</style>