BIg Cartel: How to insert javascript code to close an image overlay in the "Roadie" Theme

Question

www.thefabtabs.com

My knowledge of HTML and CSS is woefully out of date (2003ish) and very rusty. JavaScript is non-existent. I'm launching a little Big Cartel website for some products I have been selling via Instagram and eBay. I'm trying to keep things fairly simple. I have the home image enabled with a text overlay enabled. I am looking to close the overlay through JavaScript.

Using ChatGPT I was able to get the overlay to display through this HTML:

<div class="custom-block">
    <div class="image-overlay">
        <img src="your-image-url.jpg" alt="Image">
        <div class="text-overlay">
            <p>This is the text overlay.</p>
            <a href="#" class="close-overlay">X</a>
        </div>
    </div>
</div>

and this CSS:

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Text color */
    background: rgba(0, 0, 0, 0.7); /* Background color with opacity */
    padding: 20px;
    font-size: 18px; /* Adjust the font size as needed */
}

.close-overlay {
    color: #fff; /* Text color for the close button */
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px; /* Adjust the font size of the close button */
}

After a little tweaking I was able to get it looking close to how I envisioned it but I would also like the user to be able to close it. This JavaScript was generated:

document.addEventListener('DOMContentLoaded', function() {
    var overlayBanner = document.getElementById('overlay-banner');
    var closeOverlayButton = document.querySelector('.close-overlay');

    closeOverlayButton.addEventListener('click', function(event) {
        event.preventDefault();
        overlayBanner.style.display = 'none';
    });
});

I don't know how to implement this part of the code. Any help would be greatly appreciated.