Callback methods (a XMLHttpRequest) in a Javascript Class Object

I seem to get the following error: this.getPageHTML is not a function when executing my Modal class.

constructor(trigger) {
    this.trigger = trigger;
  }

  /**
   * Show Modal
   * @param {Element} trigger The element that is triggering the Modal.
   */

  showModal(trigger = this.trigger) {
      switch (trigger.dataset.modaltype) {
        case "media":
          this.getPageHTML(trigger.dataset.url, (response) => {
            const htmlContent = response.getElementById("content");
            const modalContent = document
              .getElementById("modal")
              .querySelector(".modal-window__content");

            // Inject response into Modal content
            modalContent.insertAdjacentHTML("beforeend", htmlContent.innerHTML);

          });
          break;

        default:
          break;
      }
  }

  getPageHTML(url, callback) {
    if (!window.XMLHttpRequest) return;
    const xhr = new XMLHttpRequest();

    // Get the HTML
    xhr.open("GET", url);
    xhr.responseType = "document";
    xhr.onloadstart = this.requestStarted;
    xhr.onprogress = this.updateRequestProgress;
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        xhr.onload = function () {
          if (callback && typeof callback === "function") {
            callback(this.responseXML);
          }
        };
      }
    };
    xhr.send();
  }

Not sure why exactly my getPageHTML function is "not a function"?

In my main js file I call the class like this:

modalTriggers.forEach((trigger) => {
  trigger.addEventListener("click", (e) => {
    let modal = new Modal(trigger);
    modal.showModal();

    e.preventDefault();
  });
});

Could be something super obvious I'm missing here. I have tried assigning the "this.getPageHTML" to an anonomous function like "this.getPageHTML = function(trigger.dataset.url, response) {...}" but it seems to loose what "trigger" is.