Sugarcube 2: Modals don't work if starting from story's beginning

Hi all,

I'm using modals to give short descriptions of highlighted words in the story. They work perfectly well IF I start the story from a passage that has modals in it. However, if I start the story from the very beginning and play through to a passage that contains modals, nothing happens when I click the modal triggers. It doesn't throw any errors or react in any way. I'm almost positive it's a scope issue or something related to JS execution in relation to loading the DOM, but I'm not great with JavaScript.

This is the code that is in my story JavaScript:

window.openModal = function(modal, btn, span) {
	btn.onclick = function() {
    $(modal).fadeIn( "slow" );
}
$(span).click(function() {
  $(modal).fadeOut( "slow" );
});

window.onclick = function(event) {
    if (event.target == modal) {
        $(modal).fadeOut( "slow" );
    }
}
}

And this is the code in the passage where the modals are located:

<<script>>
window.onload = function () {
window.openModal(document.getElementById("teuthModal"), document.getElementById("teuthTrigger"), document.getElementsByClassName("close")[0]);

window.openModal(document.getElementById("oxyModal"), document.getElementById("oxyTrigger"), document.getElementsByClassName("close")[1]);

window.openModal(document.getElementById("coldModal"), document.getElementById("coldTrigger"), document.getElementsByClassName("close")[2]);
}
<</script>>

Any help would be much appreciated.