Call external JS function

I have a JavaScript file with script for modal windows, i link this file to my Custom_UI.html – the UI file, where orginial “projectname.html” is embedded

I add annotation to my scene, it is there, i make simple puzzle setup – when clicked on this annotation -> call external function, that open modal window, i already find out that in order to use puzzle “call external function” i need to put my function in “projectname.js” file at “functionExternalInterface(app){} block.

But i am very bad at JS and can’t figure the right way of inserting my script.

Script for modal windows:
I will attach the same code as a screenshot in case it will be better to understand this way

// Get the button that opens the modal
var btn = document.querySelectorAll("div.modal-button");

//All page modals
var modals = document.querySelectorAll(".modal");

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
  btn.onclick = function openModal(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
  };
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
  spans.onclick = function () {
    for (var index in modals) {
      if (typeof modals[index].style !== "undefined")
        modals[index].style.display = "none";
    }
  };
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target.classList.contains("modal")) {
    for (var index in modals) {
      if (typeof modals[index].style !== "undefined")
        modals[index].style.display = "none";
    }
  }
};